DPR scale fixes

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

@@ -16,9 +16,8 @@
 
 .navbar {
   height: auto;
-  /* Adjusts height automatically based on content */
   white-space: nowrap;
-  /* Prevents wrapping of navbar contents */
+  width: 100vw;
 }
 
 /* TODO enable later
@@ -30,6 +29,7 @@
     margin-right: auto;
 }*/
 
+
 html[dir="ltr"] * {
   direction: ltr;
 }

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

@@ -270,6 +270,8 @@ span.icon-text::after {
 /* Mega Menu */
 .dropdown-mega .dropdown-menu {
   width: 98%;
+  transform: scale(0.85);
+  transform-origin: top center;
 }
 
 .dropdown-mega .title {

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

@@ -23,6 +23,37 @@
 
   <script>
     window.stirlingPDF = window.stirlingPDF || {};
+    
+    function scaleNav() {
+      const currentDPR = window.devicePixelRatio || 1;
+      
+      if (currentDPR <= 1) {
+        return; // No scaling needed at normal zoom
+      }
+      
+      const navScale = 1 / currentDPR;
+      const dropdownScale = 1 / Math.sqrt(currentDPR);
+      
+      const navbar = document.querySelector('.navbar');
+      
+      if (navbar) {
+        navbar.style.transform = `translateX(-50%) scale(${navScale})`;
+        navbar.style.transformOrigin = 'top center';
+        navbar.style.width = `${100 / navScale}%`;
+        navbar.style.left = '50%';
+        console.log('Applied navbar scale:', navScale);
+      }
+      
+      setTimeout(() => {
+        const dropdowns = document.querySelectorAll('.dropdown-menu');
+        dropdowns.forEach(dropdown => {
+          dropdown.style.transform = `scale(${dropdownScale})`;
+        });
+        console.log('Applied dropdown scale:', dropdownScale);
+      }, 100);
+    }
+    
+    document.addEventListener('DOMContentLoaded', scaleNav);
   </script>
   <script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
   <script th:src="@{'/js/fetch-utils.js'}"></script>

stirling-pdf/src/main/resources/templates/home.html

@@ -216,32 +216,53 @@
   </script>
   <script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script>
   <script>
-    function applyScale() {
+    function scaleStuff() {
-      const baseWidth = 1440;
+      const w = 1440;
-      const baseHeight = 1000;
+      const h = 1000;
-      const scaleX = window.innerWidth / baseWidth;
-      const scaleY = window.innerHeight / baseHeight;
-      const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
-      const ui = document.getElementById('scale-wrap');
-      const pageContainer = document.querySelector('.page-container');
       
-      // Calculate available space for content
+      const sx = window.innerWidth / w;
-      const navbar = document.querySelector('.navbar, nav');
+      const sy = window.innerHeight / h;
-      const navbarHeight = navbar ? navbar.offsetHeight : 0;
+      const s = Math.max(0.9, Math.min(sx, sy));
-      const availableHeight = pageContainer.offsetHeight - navbarHeight;
+      const el = document.getElementById('scale-wrap');
-      const originalHeight = ui.scrollHeight;
+      const container = document.querySelector('.page-container');
       
-      // Dynamic scale based on available space, with a safety margin
+      const nav = document.querySelector('.navbar, nav');
-      let finalScale = Math.min(scale * 0.75, (availableHeight * 0.98) / originalHeight);
+      const navH = nav ? nav.offsetHeight : 0;
-      finalScale = Math.max(0.5, finalScale); // Minimum scale
+      const space = container.offsetHeight - navH;
+      const origH = el.scrollHeight;
       
-      ui.style.transform = `scale(${finalScale})`;
+      let finalS = Math.min(s * 0.75, (space * 0.98) / origH);
-      ui.style.transformOrigin = 'top center';
+      finalS = Math.max(0.5, finalS);
-      ui.style.height = `${originalHeight * finalScale}px`;
+      
+      el.style.transform = `scale(${finalS})`;
+      el.style.transformOrigin = 'top center';
+      el.style.height = `${origH * finalS}px`;
+    }
+    let prevW = window.innerWidth;
+    let prevH = window.innerHeight;
+    let prevDPR = window.devicePixelRatio;
+    
+    function onResize() {
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const dpr = window.devicePixelRatio;
+      
+      if (w !== prevW || h !== prevH) {
+        if (dpr === prevDPR) {
+          scaleStuff();
+        }
+      }
+      
+      prevW = w;
+      prevH = h;
+      prevDPR = dpr;
     }
     
-      applyScale();
+    window.addEventListener('load', () => {
+      setTimeout(scaleStuff, 100);
+    });
     
+    window.addEventListener('resize', onResize);
     
   </script>
 </body>