[call-me] - fix style

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.2.93",
+    "version": "1.2.94",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.2.93",
+            "version": "1.2.94",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.2.93",
+    "version": "1.2.94",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/i18n.js

@@ -48,11 +48,13 @@ async function initI18n() {
     // Determine which locale to use
     const savedLocale = localStorage.getItem('locale');
     const browserLocale = navigator.language.split('-')[0]; // Get 'en' from 'en-US'
-    
-    i18n.currentLocale = 
-        (savedLocale && supportedLocales.includes(savedLocale)) ? savedLocale :
-        supportedLocales.includes(browserLocale) ? browserLocale :
-        i18n.defaultLocale;
+
+    i18n.currentLocale =
+        savedLocale && supportedLocales.includes(savedLocale)
+            ? savedLocale
+            : supportedLocales.includes(browserLocale)
+              ? browserLocale
+              : i18n.defaultLocale;
 
     // Load translations, set up language selector, and translate the page
     await loadTranslations(i18n.currentLocale);
@@ -276,9 +278,7 @@ function showTranslatedAlert(titleKey, textKey, icon = 'info') {
 }
 
 // Initialize i18n when DOM is ready
-(document.readyState === 'loading' 
-    ? document.addEventListener('DOMContentLoaded', initI18n) 
-    : initI18n());
+document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', initI18n) : initI18n();
 
 // Re-translate when dynamic content is added (for mobile compatibility)
 if (typeof MutationObserver !== 'undefined') {

public/style.css

@@ -1103,13 +1103,7 @@ input {
     gap: 6px;
     flex: 1;
     min-width: 0;
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.sidebar-tabs::-webkit-scrollbar {
-    display: none;
+    overflow: hidden;
 }
 
 .sidebar-tab {
@@ -1126,11 +1120,19 @@ input {
     display: flex;
     align-items: center;
     gap: 8px;
-    white-space: nowrap;
-    flex-shrink: 0;
+    flex: 1 1 0;
+    min-width: 0;
+    white-space: normal;
+    justify-content: center;
     overflow: visible;
 }
 
+.sidebar-tab span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
 .sidebar-tab::before {
     content: '';
     position: absolute;
@@ -1240,7 +1242,7 @@ input {
     display: none;
     flex: 1;
     flex-direction: column;
-    height: calc(100vh - 60px);
+    min-height: 0;
 }
 
 .tab-content.active {
@@ -1796,22 +1798,22 @@ input {
     }
 
     .tab-content {
-        height: calc(100dvh - 60px);
+        min-height: 0;
     }
 
     .sidebar-tabs {
         flex: 1;
-        justify-content: flex-start;
-        overflow-x: auto;
+        justify-content: space-between;
+        overflow: hidden;
     }
 
     .sidebar-tab {
-        flex: 0 0 auto;
+        flex: 1 1 0;
+        min-width: 0;
         text-align: center;
         padding: 8px 8px;
         font-size: 0.8rem;
         gap: 4px;
-        min-width: fit-content;
     }
 
     .sidebar-tab span {