From 30b094caf70d25e386f4ce4197af42461ba1ea52 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 16 May 2026 11:45:23 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90Improved=20languuage=20detection=20?=
 =?UTF-8?q?and=20selection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  | 26 +++++++++++---------
 src/components/Settings/LanguageSwitcher.vue |  6 +++--
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7ec62a4d..4f6bdb8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -183,17 +183,21 @@ export default {
       }
     },
 
+    /* Case-insensitive lookup that returns the canonical locale code, or undefined */
+    resolveLocale(availibleLocales, userLang) {
+      if (!userLang) return undefined;
+      const target = userLang.toLowerCase();
+      return availibleLocales.find((lang) => lang.toLowerCase() === target);
+    },
+
     /* Auto-detects users language from browser/ os, when not specified */
     autoDetectLanguage(availibleLocales) {
-      const isLangSupported = (languageList, userLang) => languageList
-        .map(lang => lang.toLowerCase()).find((lang) => lang === userLang.toLowerCase());
-
       const usersBorwserLang1 = window.navigator.language || ''; // e.g. en-GB or or ''
       const usersBorwserLang2 = usersBorwserLang1.split('-')[0]; // e.g. en or undefined
-      const usersSpairLangs = window.navigator.languages; // e.g [en, en-GB, en-US]
-      return isLangSupported(availibleLocales, usersBorwserLang1)
-        || isLangSupported(availibleLocales, usersBorwserLang2)
-        || usersSpairLangs.find((spair) => isLangSupported(availibleLocales, spair))
+      const usersSpairLangs = window.navigator.languages || []; // e.g [en, en-GB, en-US]
+      return this.resolveLocale(availibleLocales, usersBorwserLang1)
+        || this.resolveLocale(availibleLocales, usersBorwserLang2)
+        || usersSpairLangs.map((spair) => this.resolveLocale(availibleLocales, spair)).find(Boolean)
         || defaultLanguage;
     },
 
@@ -202,11 +206,9 @@ export default {
       const availibleLocales = this.$i18n.availableLocales; // All available locales
       const usersLang = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
       if (usersLang) {
-        if (availibleLocales.includes(usersLang)) {
-          return usersLang;
-        } else {
-          ErrorHandler(`Unsupported Language: '${usersLang}'`);
-        }
+        const resolved = this.resolveLocale(availibleLocales, usersLang);
+        if (resolved) return resolved;
+        ErrorHandler(`Unsupported Language: '${usersLang}'`);
       }
       return this.autoDetectLanguage(availibleLocales);
     },
diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue
index 40dd73a0..b8ff6da9 100644
--- a/src/components/Settings/LanguageSwitcher.vue
+++ b/src/components/Settings/LanguageSwitcher.vue
@@ -127,11 +127,13 @@ export default {
 <style scoped lang="scss">
 
 .language-switcher {
-  height: 100%;
   margin: 0;
   padding: 1rem;
+  width: calc(100% - 2rem);
+  height: calc(100% - 2rem);
   background: var(--config-settings-background);
   color: var(--config-settings-color);
+  position: relative;
   h3.title {
     text-align: center;
   }
@@ -153,8 +155,8 @@ export default {
     position: absolute;
     margin: 1rem auto;
     cursor: default;
-    width: 100%;
     bottom: 0;
+    width: inherit;
   }
   &.mini {
     height: auto;