Overflow and mrpack fixes, comfortable memory slider and more. (#762)

* Add overflow rules for certain elements.

* Round scrollbar corners to be more attractive.

* Avoid corners in avatar & fix white corner in logs

* Increase step to 64 for memory related inputs.

* Fix overflow on title in mod browse. Fixes #740

* Fix overflow in instance mod browsing.

* Add checks for instances without versions.

theseus_gui/src/components/ui/Instance.vue

@@ -187,7 +187,7 @@ onUnmounted(() => unlisten())
   <div class="instance">
     <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
       <Avatar
-        size="sm"
+        size="lg"
         :src="
           props.instance.metadata
             ? !props.instance.metadata.icon ||

theseus_gui/src/components/ui/InstanceCreationModal.vue

@@ -20,7 +20,13 @@
       </div>
       <div class="input-row">
         <p class="input-label">Name</p>
-        <input v-model="profile_name" autocomplete="off" class="text-input" type="text" />
+        <input
+          v-model="profile_name"
+          autocomplete="off"
+          class="text-input"
+          type="text"
+          maxlength="100"
+        />
       </div>
       <div class="input-row">
         <p class="input-label">Loader</p>

theseus_gui/src/pages/Browse.vue

@@ -549,7 +549,11 @@ onUnmounted(() => unlistenOffline())
             size="sm"
           />
           <div class="small-instance_info">
-            <span class="title">{{ instanceContext.metadata.name }}</span>
+            <span class="title">{{
+              instanceContext.metadata.name.length > 20
+                ? instanceContext.metadata.name.substring(0, 20) + '...'
+                : instanceContext.metadata.name
+            }}</span>
             <span>
               {{
                 instanceContext.metadata.loader.charAt(0).toUpperCase() +

theseus_gui/src/pages/Settings.vue

@@ -385,7 +385,7 @@ async function refreshDir() {
           v-model="settings.memory.maximum"
           :min="8"
           :max="maxMemory"
-          :step="1"
+          :step="64"
           unit="mb"
         />
       </div>

theseus_gui/src/pages/instance/Index.vue

@@ -161,7 +161,13 @@ const breadcrumbs = useBreadcrumbs()
 
 const instance = ref(await get(route.params.id).catch(handleError))
 
-breadcrumbs.setName('Instance', instance.value.metadata.name)
+breadcrumbs.setName(
+  'Instance',
+  instance.value.metadata.name.length > 40
+    ? instance.value.metadata.name.substring(0, 40) + '...'
+    : instance.value.metadata.name
+)
+
 breadcrumbs.setContext({
   name: instance.value.metadata.name,
   link: route.path,
@@ -203,7 +209,7 @@ const checkProcess = async () => {
 
 // Get information on associated modrinth versions, if any
 const modrinthVersions = ref([])
-if (!(await isOffline()) && instance.value.metadata.linked_data) {
+if (!(await isOffline()) && instance.value.metadata.linked_data?.project_id) {
   modrinthVersions.value = await useFetch(
     `https://api.modrinth.com/v2/project/${instance.value.metadata.linked_data.project_id}/version`,
     'project'
@@ -366,6 +372,8 @@ Button {
 .name {
   font-size: 1.25rem;
   color: var(--color-contrast);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .metadata {

theseus_gui/src/pages/instance/Logs.vue

@@ -524,13 +524,26 @@ onUnmounted(() => {
   display: flex;
   padding: 0.6rem;
   flex-direction: row;
+  overflow: auto;
   gap: 0.5rem;
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+  }
 }
 
 :deep(.vue-recycle-scroller__item-wrapper) {
   overflow: visible; /* Enables horizontal scrolling */
 }
 
+:deep(.vue-recycle-scroller) {
+  &::-webkit-scrollbar-corner {
+    background-color: var(--color-bg);
+    border-radius: 0 0 10px 0;
+  }
+}
+
 .scroller {
   height: 100%;
 }

theseus_gui/src/pages/instance/Options.vue

@@ -243,7 +243,7 @@
         :disabled="!overrideMemorySettings"
         :min="8"
         :max="maxMemory"
-        :step="1"
+        :step="64"
         unit="mb"
       />
     </div>
@@ -362,7 +362,10 @@
         <span class="label__description">
           <strong>Version: </strong>
           {{
-            installedVersionData.name.charAt(0).toUpperCase() + installedVersionData.name.slice(1)
+            installedVersionData?.name != null
+              ? installedVersionData.name.charAt(0).toUpperCase() +
+                installedVersionData.name.slice(1)
+              : getLocalVersion(props.instance.path)
           }}
         </span>
       </label>
@@ -401,7 +404,7 @@
       </Button>
     </div>
 
-    <div class="adjacent-input">
+    <div v-if="props.instance.metadata.linked_data.project_id" class="adjacent-input">
       <label for="change-modpack-version">
         <span class="label__title">Change modpack version</span>
         <span class="label__description">
@@ -641,9 +644,10 @@ const unlinkModpack = ref(false)
 const inProgress = ref(false)
 const installing = computed(() => props.instance.install_stage !== 'installed')
 const installedVersion = computed(() => props.instance?.metadata?.linked_data?.version_id)
-const installedVersionData = computed(() =>
+const installedVersionData = computed(() => {
-  props.versions.find((version) => version.id === installedVersion.value)
+  if (!installedVersion.value) return null
-)
+  return props.versions.find((version) => version.id === installedVersion.value)
+})
 
 watch(
   [
@@ -671,6 +675,15 @@ watch(
   { deep: true }
 )
 
+const getLocalVersion = (path) => {
+  const pathSlice = path.split(' ').slice(-1).toString()
+  // If the path ends in (1), (2), etc. it's a duplicate instance and no version can be obtained.
+  if (/^\(\d\)/.test(pathSlice)) {
+    return 'Unknown'
+  }
+  return pathSlice
+}
+
 const editProfileObject = computed(() => {
   const editProfile = {
     metadata: {

theseus_gui/src/pages/project/Index.vue

@@ -14,7 +14,11 @@
             size="sm"
           />
           <div class="small-instance_info">
-            <span class="title">{{ instance.metadata.name }}</span>
+            <span class="title">{{
+              instance.metadata.name.length > 20
+                ? instance.metadata.name.substring(0, 20) + '...'
+                : instance.metadata.name
+            }}</span>
             <span>
               {{
                 instance.metadata.loader.charAt(0).toUpperCase() + instance.metadata.loader.slice(1)