Fixes/qol in SelectedGame view

- Remove redundant div, put row on viewport instead.
- Fixed tab labels wrapping so that resizing flows nicely.
- Translated the "No mods installed" text.
- Partially fixed some margin and width calc issues by using the app store.
- "Start Modded" button now disabled while no mods are installed.

frontend/src/assets/styles/global.css

@@ -39,7 +39,6 @@ body {
     padding: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
 }
 
 body::before {

frontend/src/components/general/Sidebar.vue

@@ -14,7 +14,7 @@ const appInfo = useDialog('app-info')
 const appStore = useAppStore()
 const { 
     sidebarExpanded, 
-    sidebarWidth 
+    sidebarWidthPx
 } = storeToRefs(appStore)
 
 const Dashboard = () => router.push('/')
@@ -145,7 +145,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     align-items: center;
     position: fixed;
     z-index: 999;
-    width: v-bind(sidebarWidth);
+    width: v-bind(sidebarWidthPx);
 }
 
 .collapsed {

frontend/src/components/reusable/Viewport.vue

@@ -4,10 +4,9 @@ import { useAppStore } from '@stores'
 
 const appStore = useAppStore()
 const { 
-    sidebarWidth 
+    sidebarOffsetPx,
+    topbarHeight
 } = storeToRefs(appStore)
-
-const topbarHeight = '30px'
 </script>
 
 <template>
@@ -19,7 +18,7 @@ const topbarHeight = '30px'
 <style scoped>
 .viewport {
     max-height: calc(100vh - v-bind(topbarHeight));
-    margin-left: calc(v-bind(sidebarWidth) + 20px);
-    margin-right: 20px;
+    margin-left: calc(v-bind(sidebarOffsetPx));
+    /* margin-right: 30px; */
 }
 </style>

frontend/src/components/selected-game/ProfileManager.vue

@@ -168,7 +168,7 @@ onMounted(async () => {
 
 <style scoped>
 .profile-manager {
-    margin: 30px 10px 20px 10px;
+    margin: 30px 0px 20px 0px;
     display: flex;
     flex-direction: column;
     flex: 1 0 auto;

frontend/src/i18n/locales/de.json

@@ -95,6 +95,7 @@
       "header": "Profilmanager",
       "search-placeholder": "Suchprofile",
       "new-profile": "Neues Profil"
-    }
+    },
+    "no-mods-installed": "Keine Mods installiert."
   }
 }

frontend/src/i18n/locales/en.json

@@ -26,7 +26,8 @@
       "edit-button": "Edit"
     },
     "empty-results": "No mods match the search query",
-    "loading-mod-list": "Loading mod list"
+    "loading-mod-list": "Loading mod list",
+    "no-mods-installed": "No mods installed."
   },
   "settings": {
     "select-language": "Select language",

frontend/src/i18n/locales/es.json

@@ -95,6 +95,7 @@
       "header": "Administrador de perfiles",
       "search-placeholder": "Buscar perfiles",
       "new-profile": "Nuevo perfil"
-    }
+    },
+    "no-mods-installed": "No hay modificaciones instaladas."
   }
 }

frontend/src/i18n/locales/fr.json

@@ -95,6 +95,7 @@
       "header": "Gestionnaire de profil",
       "search-placeholder": "Rechercher des profils",
       "new-profile": "Nouveau profil"
-    }
+    },
+    "no-mods-installed": "Aucun mod installé."
   }
 }

frontend/src/i18n/locales/it.json

@@ -95,6 +95,7 @@
       "header": "Gestore del profilo",
       "search-placeholder": "Cerca profili",
       "new-profile": "Nuovo profilo"
-    }
+    },
+    "no-mods-installed": "Nessuna mod installata."
   }
 }

frontend/src/stores/index.ts

@@ -7,12 +7,23 @@ import { computed, ref } from 'vue'
 //     sidebarWidth: string
 // }
 
+// TODO: Instead of hardcoding height/width refs, they should all be
+//       computed and point to their respective element in the DOM.
 export const useAppStore = defineStore('AppStore', () => {
     const maxThreads = ref(2)
 
+    const topbarHeight = ref(30)
     const sidebarExpanded = ref(false)
-    const sidebarWidth = computed(() => sidebarExpanded.value ? '180px' : '75px')
-
+
+    const sidebarMargin = ref(20)
+    const sidebarMarginPx = computed(() => `${sidebarMargin.value}px`)
+
+    const sidebarWidth = computed(() => sidebarExpanded.value ? 180 : 75)
+    const sidebarWidthPx = computed(() => `${sidebarWidth.value}px`)
+
+    const sidebarOffset = computed(() => sidebarWidth.value + sidebarMargin.value)
+    const sidebarOffsetPx = computed(() => `${sidebarOffset.value}px`)
+
     function toggleSidebar() {
         sidebarExpanded.value = !sidebarExpanded.value
     }
@@ -27,8 +38,11 @@ export const useAppStore = defineStore('AppStore', () => {
 
     return { 
         maxThreads,
+        topbarHeight,
         sidebarExpanded,
-        sidebarWidth,
+        sidebarMargin, sidebarMarginPx,
+        sidebarWidth, sidebarWidthPx,
+        sidebarOffset, sidebarOffsetPx,
         toggleSidebar,
         setMaxThreads
     }

frontend/src/views/Dashboard.vue

@@ -135,7 +135,8 @@ async function getPackages() {
 }
 
 :deep(.p-tab) {
-    font-size: 24px;
+    font-size: 25px;
+    font-weight: 450;
 }
 </style>
 <!-- #endregion -->