languages container scaling issues fix

stirling-pdf/src/main/resources/static/css/navbar.css

@@ -159,8 +159,23 @@
 
 .scalable-languages-container {
   display: grid;
-  /* Auto-fill columns, with a minimum width of 180px */
+  grid-template-columns: repeat(1, 1fr);
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+}
+
+@media (min-width: 400px) {
+  .scalable-languages-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 600px) {
+  .scalable-languages-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 900px) {
+  .scalable-languages-container {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
 }
 
 .scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child {
@@ -236,6 +251,12 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   }
 }
 
+@media (min-width: 900px) {
+  #languageSelection.scalable-languages-container {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+}
+
 .dropdown-item .icon-text {
   text-wrap: wrap;
   word-break: break-word;
@@ -535,6 +556,17 @@ html[dir="rtl"] .dropdown-menu {
         width: 100vw !important;
         max-width: 100vw !important;
         left: 0 !important;
+        right: 0 !important;
+        transform: none !important;
+        transform-origin: none !important;
+    }
+
+    .navbar .navbar-expand-xl .dropdown-menu,
+    .navbar-expand .dropdown-menu {
+        transform: none !important;
+        transform-origin: none !important;
+        left: 0 !important;
+        right: 0 !important;
     }
 
     .navbar-collapse .dropdown-mega .dropdown-menu {
@@ -582,6 +614,27 @@ html[dir="rtl"] .dropdown-menu {
       padding-left: 4px !important;
     }
 
+    #mainNavbarDropdownMenu {
+      transform: none !important;
+      transform-origin: none !important;
+      left: 0 !important;
+      right: 0 !important;
+      width: 100vw !important;
+      margin-bottom: 0 !important;
+    }
+
+    .dropdown-menu,
+    .dropdown-menu-tp,
+    .dropdown-menu-tp.show {
+      transform: none !important;
+      transform-origin: none !important;
+      max-width: 95vw !important;
+      width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
 
 }
 

stirling-pdf/src/main/resources/static/js/navbar.js

@@ -109,7 +109,34 @@ window.tooltipSetup = () => {
   });
 };
 
+// Override the bootstrap dropdown styles for mobile
+function fixNavbarDropdownStyles() {
+  if (window.innerWidth < 1200) {
+    document.querySelectorAll('.navbar .dropdown-menu').forEach(function(menu) {
+      menu.style.transform = 'none';
+      menu.style.transformOrigin = 'none';
+      menu.style.left = '0';
+      menu.style.right = '0';
+      menu.style.maxWidth = '95vw';
+      menu.style.width = '100vw';
+      menu.style.marginBottom = '0';
+    });
+  } else {
+    document.querySelectorAll('.navbar .dropdown-menu').forEach(function(menu) {
+      menu.style.transform = '';
+      menu.style.transformOrigin = '';
+      menu.style.left = '';
+      menu.style.right = '';
+      menu.style.maxWidth = '';
+      menu.style.width = '';
+      menu.style.marginBottom = '';
+    });
+  }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   tooltipSetup();
   setupDropdowns();
+  fixNavbarDropdownStyles();
 });
+window.addEventListener('resize', fixNavbarDropdownStyles);

stirling-pdf/src/main/resources/templates/fragments/common.html

@@ -30,9 +30,8 @@
     // Determine if this is actually a high DPI screen at page load
     const isHighDPI = systemDPR > 1.4;
 
-    function scaleNav() {
+    // Reset all navbar and dropdown scaling styles
-      if (window.innerWidth < 800) {
+    function resetNavScaling() {
-        // Reset/remove scaling on mobile devices
       const navbarElement = document.querySelector('.navbar');
       if (navbarElement) {
         navbarElement.style.transform = '';
@@ -42,18 +41,26 @@
         navbarElement.style.right = '';
         navbarElement.style.marginBottom = '';
         navbarElement.classList.remove('navbar-expand-lg');
-          navbarElement.classList.add('navbar-expand-xl');
+        navbarElement.classList.remove('navbar-expand-xl');
       }
-        
       // Reset dropdown scaling
       const dropdowns = document.querySelectorAll('.dropdown-menu');
       dropdowns.forEach(dropdown => {
         dropdown.style.transform = '';
         dropdown.style.transformOrigin = '';
       });
-        
       // Reset CSS custom property
       document.documentElement.style.setProperty('--navbar-height', '');
+    }
+    
+    function scaleNav() {
+      resetNavScaling();
+      if (window.innerWidth < 1200) {
+        const navbarElement = document.querySelector('.navbar');
+        if (navbarElement) {
+          navbarElement.classList.remove('navbar-expand-lg');
+          navbarElement.classList.add('navbar-expand-xl');
+        }
         return;
       }
       const currentDPR = window.devicePixelRatio || 1;