couple of change requests addressed, tried to take the nav bars height into account and used constant values rather than relative values. Leaned more into using media queries, it bulks the code up a bit but we're going to V2 soon so this likely wont need a lot of mainainence in future

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

@@ -98,6 +98,61 @@
   font-weight: bold;
 }
 
+/* Responsive text sizing for drag & drop area */
+#fileInputText {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--md-sys-color-on-surface);
+  max-width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+/* Progressive font size reduction for high zoom levels */
+@media only screen and (max-width: 1280px) {
+  #fileInputText {
+    font-size: 15px;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  #fileInputText {
+    font-size: 14px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  #fileInputText {
+    font-size: 13px;
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  #fileInputText {
+    font-size: 12px;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  #fileInputText {
+    font-size: 11px;
+    line-height: 1.3;
+  }
+}
+
+@media only screen and (max-width: 384px) {
+  #fileInputText {
+    font-size: 10px;
+    line-height: 1.4;
+  }
+
+  /* Also scale the container at ultra-high zoom */
+  .input-container {
+    height: 130px;
+    padding: 5px;
+  }
+}
+
 .file-input-btn {
   display: inline-block;
 

stirling-pdf/src/main/resources/static/css/multi-tool.css

@@ -1,6 +1,8 @@
 .multi-tool-container {
-  max-width: 95vw;
+  max-width: 100vw; /* Fill the full screen width */
-  margin: 0 auto;
+  margin: 0;
+  padding: 0 20px; /* Add some padding from screen edges */
+  /* Remove flex layout to prevent content shift when sidebar appears */
 }
 
 label {
@@ -78,6 +80,8 @@ label {
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
   padding: 15px 0; /* Reduced padding for more compact layout */
+  margin-left: 60px;
+  margin-right: 20px;
 }
 
 #pages-container-wrapper {
@@ -207,6 +211,51 @@ label {
   transition: rotate 0.3s;
 }
 
+/* Single column layout optimizations - when sidebar is active and space is constrained */
+@media only screen and (max-width: 1280px) {
+  /* Detect likely single-column layouts and optimize spacing */
+  .page-container {
+    width: 280px !important; /* Increase size from 250px */
+    height: 280px !important; /* Increase size from 250px */
+    margin: 10px 15px !important; /* Reduce margin from 15px 25px */
+  }
+
+  .page-container img {
+    max-width: calc(100% - 10px) !important; /* Reduce padding from 15px to 10px */
+    max-height: calc(100% - 10px) !important; /* Reduce padding from 15px to 10px */
+  }
+}
+
+/* More aggressive optimizations for smaller screens - definitely single column */
+@media only screen and (max-width: 800px) {
+  .page-container {
+    width: 300px !important; /* Even bigger on smaller screens */
+    height: 300px !important; /* Even bigger on smaller screens */
+    margin: 8px 10px !important; /* Further reduce margins */
+  }
+
+  .page-container img {
+    max-width: calc(100% - 8px) !important; /* Minimal padding */
+    max-height: calc(100% - 8px) !important; /* Minimal padding */
+  }
+}
+
+/* Mobile optimizations - maximize page size */
+@media only screen and (max-width: 480px) {
+  .page-container {
+    width: calc(100vw - 80px) !important; /* Use most of screen width minus sidebar space */
+    height: calc(100vw - 80px) !important; /* Maintain square aspect ratio */
+    max-width: 320px !important; /* Don't exceed reasonable size */
+    max-height: 320px !important; /* Don't exceed reasonable size */
+    margin: 5px auto !important; /* Center and minimal margins */
+  }
+
+  .page-container img {
+    max-width: calc(100% - 6px) !important; /* Very minimal padding */
+    max-height: calc(100% - 6px) !important; /* Very minimal padding */
+  }
+}
+
 #add-pdf-button {
   margin: 0 auto;
 }
@@ -248,12 +297,58 @@ label {
   margin-bottom: 10px;
 }
 
+/* Clean vertical layout for selected pages header */
+.selected-pages-header {
+  margin-bottom: 15px;
+}
+
+.selected-pages-header h5 {
+  margin: 0 0 8px 0 !important;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--md-sys-color-on-surface);
+}
+
+.selected-pages-header #csv-input {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--md-sys-color-outline);
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  padding: 0 12px;
+  font-size: 0.95rem;
+}
+
+.selected-pages-header #csv-input:focus {
+  outline: none;
+  border-color: var(--md-sys-color-primary);
+  box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.2);
+}
+
+/* Responsive adjustments */
+@media only screen and (max-width: 480px) {
+  .selected-pages-container {
+    padding: 10px;
+  }
+
+  .selected-pages-header h5 {
+    font-size: 1rem;
+  }
+
+  .selected-pages-header #csv-input {
+    height: 2.2rem;
+    font-size: 0.9rem;
+  }
+}
+
 .pages-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   padding: 0;
   list-style: none;
+  min-height: 0;
   max-height: 10rem;
   overflow: auto;
 }
@@ -321,8 +416,8 @@ label {
     /* Fixed positioning to follow on scroll */
     position: fixed !important;
     left: 10px !important; /* Small margin from viewport edge */
-    top: 50% !important; /* Center vertically */
+    top: 80px !important; /* Just below navbar (60px) + 20px margin */
-    transform: translateY(-50%) !important; /* Center using transform */
+    bottom: 20px !important; /* Small margin from bottom */
     margin: 0 !important;
 
     /* Container styling */
@@ -337,10 +432,8 @@ label {
     align-items: center !important; /* Center buttons horizontally */
     justify-content: flex-start !important; /* Align buttons to top */
 
-    /* Height and overflow */
+    /* Height and overflow - uses full viewport minus navbar and margins */
-    height: auto !important; /* Auto height for content */
+    height: calc(100vh - 100px) !important; /* Full height: 100vh - navbar(60px) - top margin(20px) - bottom margin(20px) */
-    min-height: 28rem !important; /* 4x button height (3rem x 4) */
-    max-height: calc(100vh - 100px) !important; /* Max height constrained by viewport */
     overflow-y: auto !important; /* Enable vertical scrolling when needed */
 
     /* Hide scrollbar completely */
@@ -350,26 +443,29 @@ label {
     /* Z-index for layering */
     z-index: 12;
 
-    /* Default sizing */
+    /* Fixed sizing - zoom resistant like navbar */
     width: 70px !important;
     gap: 8px !important;
     padding: 12px 8px !important;
+    /* Ensure consistent sizing across all zoom levels */
+    box-sizing: border-box !important;
   }
 
-  /* Button base styles */
+  /* Button base styles - fixed like navbar icons */
   .mt-action-btn .btn {
-    width: 3rem !important; /* Consistent button size */
+    width: 48px !important; /* Fixed pixel size like navbar (3rem = 48px) */
-    height: 3rem !important;
+    height: 48px !important;
     border-radius: 12px !important; /* Match container radius */
     padding: 0 !important;
     margin: 0 !important;
     flex-shrink: 0; /* Prevent button shrinking */
-    font-size: 1rem !important; /* Consistent icon size */
+    font-size: 16px !important; /* Fixed pixel size for consistency */
+    box-sizing: border-box !important;
   }
 
-  /* Icon base styling */
+  /* Icon base styling - fixed pixels like navbar */
   .mt-action-btn .btn .material-symbols-rounded {
-    font-size: 1.2rem !important; /* Consistent icon size */
+    font-size: 20px !important; /* Fixed pixel size like navbar icons */
     line-height: 1 !important; /* Prevent vertical misalignment */
     display: flex !important;
     align-items: center !important;
@@ -390,12 +486,12 @@ label {
   }
 
   .mt-action-bar {
-    margin-left: 90px !important; /* Space for sidebar - keep this so action bar doesn't overlap */
+    margin-left: 25px !important;
     margin-right: 25px !important;
   }
 
-  /* Center buttons vertically when no scrolling needed */
+  /* Center buttons vertically when few buttons (no scrolling needed) */
-  .mt-action-btn:not(:has(*:nth-child(10))) {
+  .mt-action-btn:not(:has(*:nth-child(6))) {
     justify-content: center !important;
   }
 
@@ -404,7 +500,7 @@ label {
     margin-left: 0 !important;
   }
 
-  /* Center pages container accounting for sidebar */
+  /* Center pages container perfectly */
   #pages-container {
     margin: 0 auto !important;
     display: flex !important;
@@ -413,12 +509,6 @@ label {
     width: 100% !important; /* Use full available width within the card */
   }
 
-  /* Add margin to bg-card so sidebar doesn't overlap the card */
-  .bg-card {
-    margin-left: 90px !important; /* Space for sidebar (70px width + 10px left + 10px spacing) */
-    transition: margin-left 0.3s ease-in-out;
-  }
-
   /* Hide WebKit scrollbar completely */
   .mt-action-btn::-webkit-scrollbar {
     display: none !important; /* Hide scrollbar for WebKit browsers */
@@ -429,42 +519,38 @@ label {
 @media only screen and (max-width: 960px) {
   /* Styles for 200% zoom level */
   .mt-action-btn {
-    left: 5px !important; /* Small margin from viewport edge */
+    left: 8px !important; /* Small margin from viewport edge */
-    top: 50% !important; /* Center vertically */
+    top: 75px !important; /* Just below navbar (60px) + 15px margin */
-    transform: translateY(-50%) !important; /* Center using transform */
+    bottom: 15px !important; /* Small margin from bottom */
-    min-height: 18rem !important;
+    height: calc(100vh - 90px) !important; /* Full height: 100vh - navbar(60px) - top margin(15px) - bottom margin(15px) */
-
   }
 }
 
-/* 250% Zoom Level */
+/* 250% Zoom Level & Mobile Navbar Scaling */
 @media only screen and (max-width: 768px) {
-  /* Styles for 250% zoom level */
+  /* Styles for 250% zoom level + Mobile devices with scaled navbar (responsive to actual navbar height) */
 
   .mt-action-btn {
     left: 5px !important; /* Closer to edge on mobile */
     width: 60px !important; /* Slightly smaller on mobile */
-    top: 50% !important; /* Center vertically */
+    top: calc(var(--navbar-height, 60px) + 10px) !important; /* Below navbar (responsive height) + 10px margin */
-    transform: translateY(-50%) !important; /* Center using transform */
+    bottom: 10px !important; /* Small margin from bottom */
-    min-height: 18rem !important; /* 4x mobile button height (2.5rem x 4) */
+    height: calc(100vh - var(--navbar-height, 60px) - 20px) !important; /* Full height: 100vh - navbar - margins */
   }
 
   .mt-action-btn .btn {
-    width: 2.5rem !important; /* Smaller buttons on mobile */
+    width: 40px !important; /* Fixed pixel size for mobile (2.5rem = 40px) */
-    height: 2.5rem !important;
+    height: 40px !important;
+    box-sizing: border-box !important;
   }
 
   .mt-action-btn .btn .material-symbols-rounded {
-    font-size: 1rem !important; /* Smaller icons on mobile */
+    font-size: 16px !important; /* Fixed pixel size for mobile icons */
-  }
-
-  .bg-card {
-    margin-left: 75px !important; /* Space for mobile sidebar (60px width + 5px left + 10px spacing) */
-    transition: margin-left 0.3s ease-in-out;
   }
 
   .mt-action-bar {
-    margin-left: 70px !important; /* Space for mobile sidebar - keep this so action bar doesn't overlap */
+    margin-left: 25px !important; /* Consistent margins */
+    margin-right: 25px !important;
   }
 
   /* Ensure pages stay centered on mobile too */
@@ -475,55 +561,95 @@ label {
     justify-content: center !important;
     width: 100% !important; /* Use full available width within the card */
   }
+
+  /* Center page containers properly on mobile */
+  .page-container {
+    width: calc(100vw - 60px) !important; /* Account for screen padding only */
+    height: calc(100vw - 60px) !important; /* Maintain aspect ratio */
+    max-width: 350px !important; /* Don't get too large */
+    max-height: 350px !important; /* Don't get too large */
+    margin: 5px auto !important; /* Center pages with minimal margin */
+  }
 }
 
-
+/* 300% Zoom Level & Mobile Navbar Scaling */
-/* 300% Zoom Level */
 @media only screen and (max-width: 640px) {
-  /* Styles for 300% zoom level */
+  /* Styles for 300% zoom level + Mobile devices with scaled navbar (responsive to actual navbar height) */
   .mt-action-btn {
     left: 5px !important; /* Small margin from viewport edge */
-    top: 50% !important; /* Center vertically */
+    top: calc(var(--navbar-height, 60px) + 10px) !important; /* Below navbar (responsive height) + 10px margin */
-    transform: translateY(-50%) !important; /* Center using transform */
+    bottom: 10px !important; /* Small margin from bottom */
-    min-height: 10rem !important;
+    height: calc(100vh - var(--navbar-height, 60px) - 20px) !important; /* Full height: 100vh - navbar - margins */
-
   }
 }
 
-/* 400% Zoom Level */
+/* 400% Zoom Level & Mobile Navbar Scaling */
 @media only screen and (max-width: 480px) {
-  /* Styles for 400% zoom level */
+  /* Styles for 400% zoom level + Mobile devices with scaled navbar (responsive to actual navbar height) */
   .mt-action-btn {
     left: 2px !important; /* Small margin from viewport edge */
-    top: 50% !important; /* Center vertically */
+    top: calc(var(--navbar-height, 60px) + 5px) !important; /* Below navbar (responsive height) + 5px margin */
-    transform: translateY(-50%) !important; /* Center using transform */
+    bottom: 5px !important; /* Small margin from bottom */
-    min-height: 10rem !important;
+    height: calc(100vh - var(--navbar-height, 60px) - 10px) !important; /* Full height: 100vh - navbar - margins */
+    width: 50px !important; /* Compact width for small screens */
+    gap: 6px !important; /* Smaller gaps between buttons */
+    padding: 10px 6px !important; /* Reduced padding for compact layout */
   }
   .mt-action-btn .btn {
-    width: 2rem !important; /* Smaller buttons on mobile */
+    width: 32px !important; /* Compact button size */
-    height: 2rem !important;
+    height: 32px !important;
+    border-radius: 10px !important; /* Smaller border radius */
+    box-sizing: border-box !important;
   }
   .mt-action-btn .btn .material-symbols-rounded {
-    font-size: .8rem !important; /* Smaller icons on mobile */
+    font-size: 14px !important; /* Smaller icons for compact buttons */
+  }
+
+  .mt-action-bar {
+    margin-left: 25px !important; /* Consistent margins */
+    margin-right: 25px !important;
   }
 }
 
-/* 500% Zoom Level */
+/* 500% Zoom Level & Small Mobile Devices with Navbar Scaling */
 @media only screen and (max-width: 384px) {
-  /* Styles for 500% zoom level */
+  /* Styles for 500% zoom level and very small mobile devices + scaled navbar (responsive to actual navbar height) */
   .mt-action-btn {
-    left: 2px !important; /* Small margin from viewport edge */
+    left: 2px !important; /* Minimal margin from viewport edge */
-    top: 50% !important; /* Center vertically */
+    top: calc(var(--navbar-height, 60px) + 5px) !important; /* Below navbar (responsive height) + 5px margin */
-    transform: translateY(-50%) !important; /* Center using transform */
+    bottom: 5px !important; /* Small margin from bottom */
-    min-height: 8rem !important; /* 4x mobile button height (2.5rem x 4) */
+    height: calc(100vh - var(--navbar-height, 60px) - 10px) !important; /* Full height: 100vh - navbar - margins */
-    width: 2.2rem;
+    width: 40px !important; /* Compact width for small screens */
+    gap: 4px !important; /* Smaller gaps between buttons */
+    padding: 8px 4px !important; /* Reduced padding for compact layout */
   }
   .mt-action-btn .btn {
-    width: 2rem !important; /* Smaller buttons on mobile */
+    width: 28px !important; /* Ultra-compact button size */
-    height: 2rem !important;
+    height: 28px !important;
+    border-radius: 8px !important; /* Smaller border radius */
+    box-sizing: border-box !important;
   }
   .mt-action-btn .btn .material-symbols-rounded {
-    font-size: .8rem !important; /* Smaller icons on mobile */
+    font-size: 12px !important; /* Small icons for tiny buttons */
+  }
+
+  .mt-action-bar {
+    margin-left: 25px !important; /* Consistent margins */
+    margin-right: 25px !important;
+  }
+
+  /* Ultra-compact page containers for very small screens */
+  .page-container {
+    width: calc(100vw - 60px) !important; /* Account for screen padding only */
+    height: calc(100vw - 60px) !important; /* Maintain aspect ratio */
+    max-width: 280px !important; /* Reasonable max size for tiny screens */
+    max-height: 280px !important; /* Reasonable max size for tiny screens */
+    margin: 3px auto !important; /* Minimal margins */
+  }
+
+  .page-container img {
+    max-width: calc(100% - 4px) !important; /* Ultra-minimal padding */
+    max-height: calc(100% - 4px) !important; /* Ultra-minimal padding */
   }
 }
 

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

@@ -63,6 +63,79 @@
   transform: translateY(-2px);
 }
 
+/* Responsive navbar brand - prevent hamburger from wrapping */
+.navbar-brand {
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+  min-width: 0; /* Allow shrinking */
+}
+
+.navbar-brand .icon-text {
+  font-size: 1.5rem;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Progressive text shrinking to prevent hamburger wrap */
+@media only screen and (max-width: 480px) {
+  .navbar-brand .icon-text {
+    font-size: 1.3rem;
+  }
+
+  .main-icon {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .navbar-brand .icon-text {
+    font-size: 1.1rem;
+  }
+
+  .main-icon {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+@media only screen and (max-width: 380px) {
+  .navbar-brand .icon-text {
+    font-size: 1rem;
+  }
+
+  .main-icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+@media only screen and (max-width: 340px) {
+  .navbar-brand .icon-text {
+    font-size: 0.9rem;
+  }
+
+  .main-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* Ultra-small screens - hide text, keep icon */
+@media only screen and (max-width: 320px) {
+  .navbar-brand .icon-text {
+    display: none;
+  }
+
+  .main-icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 .nav-icon {
   vertical-align: middle;
   font-size: 2rem !important;

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

@@ -81,6 +81,12 @@
         console.log('DPR:', currentDPR, 'isHighDPI:', isHighDPI, 'baseScale:', baseScale, 'navScale:', navScale, 'effective width:', effectiveWidth);
       }
       
+      // Set CSS custom property for mobile navbar scaling (for sidebar positioning)
+      // Use the ACTUAL scaled height, not a fixed assumption
+      const baseHeight = 60;
+      const actualScaledHeight = baseHeight * navScale;
+      document.documentElement.style.setProperty('--navbar-height', `${actualScaledHeight}px`);
+      
       setTimeout(() => {
         const dropdowns = document.querySelectorAll('.dropdown-menu');
         dropdowns.forEach(dropdown => {
@@ -379,10 +385,10 @@
         Browse
       </label>
       <div class="d-flex flex-column align-items-center">
-        <div class="d-flex justify-content-start align-items-center" id="fileInputText">
+        <div class="text-center" id="fileInputText" style="word-wrap: break-word; hyphens: auto; line-height: 1.2;">
-          <div th:text="#{fileChooser.click}" style="margin-right: 5px"></div>
+          <span th:text="#{fileChooser.click}"></span>
-          <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
+          <span th:text="#{fileChooser.or}" style="margin: 0 5px;"></span>
-          <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
+          <span th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></span>
         </div>
         <hr th:if="${@GoogleDriveEnabled == true}" class="horizontal-divider" >
       </div>

stirling-pdf/src/main/resources/templates/multi-tool.html

@@ -33,11 +33,9 @@
               </div>
 
               <div id="selected-pages-display" class="selected-pages-container hidden">
-                <div style="display:flex; height:3rem; margin-right:1rem">
+                <div class="selected-pages-header">
-                  <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected
+                  <h5 th:text="#{multiTool.selectedPages}">Selected Pages</h5>
-                    Pages</h5>
+                  <input type="text" id="csv-input" class="form-control" placeholder="1,3,5-10" value="">
-                  <input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
-                    value="">
                 </div>
                 <ul id="selected-pages-list" class="pages-list"></ul>
               </div>