A fair but better, there's still weirdness > 400% but who in their right mind is at 4x zoom

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

@@ -77,17 +77,17 @@ label {
 .bg-card {
   background-color: var(--md-sys-color-surface-5);
   border-radius: 3rem;
-  padding: 25px 0;
+  padding: 15px 0; /* Reduced padding for more compact layout */
 }
 
 #pages-container-wrapper {
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 1rem;
+  padding: 0.75rem; /* Reduced padding for more compact layout */
   border-radius: 25px;
   min-height: 275px;
-  margin: 0 0 30px 0;
+  margin: 0 0 20px 0; /* Reduced bottom margin */
 }
 
 #pages-container {
@@ -226,7 +226,7 @@ label {
 }
 
 .tool-header {
-  margin: 0.5rem 1rem 2rem;
+  margin: 0.5rem 1rem 1rem; /* Reduced bottom margin for more compact layout */
 }
 
 #select-pages-button {
@@ -304,9 +304,19 @@ label {
 @media only screen and (min-width: 1200px) and (max-width: 1399px) { #pages-container { width: 900px; } }
 @media only screen and (min-width: 1399px) { #pages-container { width: 1200px; } }
 
-/* Zoom-responsive sidebar for 175% zoom and higher */
+/* 125% Zoom Level */
+@media only screen and (max-width: 1536px) {
+  /* Styles for 125% zoom level (1920px ÷ 1.25 = 1536px) */
+}
+
+/* 150% Zoom Level */
+@media only screen and (max-width: 1280px) {
+  /* Styles for 150% zoom level (1920px ÷ 1.5 = 1280px) */
+}
+
+/* 175% Zoom Level - Zoom-responsive sidebar for 175% zoom and higher */
 /* Base styles for both zoom scenarios */
-@media only screen and (max-width: 1100px) {
+@media only screen and (max-width: 1097px) {
 
   /* Make the main container relative for absolute positioning */
   .container {
@@ -315,16 +325,15 @@ label {
 
     /* Transform action buttons to sidebar aligned with card */
   .mt-action-btn {
-    /* Absolute positioning relative to container */
+    /* Fixed positioning to follow on scroll */
-    position: absolute !important;
+    position: fixed !important;
-    left: 0 !important; /* Align with container's left edge */
+    left: 10px !important; /* Small margin from viewport edge */
-    top: 0 !important; /* Align with card's top */
+    top: 50% !important; /* Center vertically */
-    bottom: 60px !important; /* Account for footer space */
+    transform: translateY(-50%) !important; /* Center using transform */
-    transform: none !important; /* Remove default centering */
     margin: 0 !important;
 
     /* Container styling */
-    border-radius: 12px !important; /* Match button border radius */
+    border-radius: 16px !important; /* Consistent with card styling */
     background-color: var(--md-sys-color-surface-container-low);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     backdrop-filter: blur(8px);
@@ -336,28 +345,38 @@ label {
     justify-content: flex-start !important; /* Align buttons to top */
 
     /* Height and overflow */
-    height: auto !important; /* Fill between top and bottom positions */
+    height: auto !important; /* Auto height for content */
-    max-height: none !important; /* Remove height constraints */
+    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 */
+    scrollbar-width: none !important; /* Firefox */
+    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
+
     /* Z-index for layering */
     z-index: 12;
 
-    /* Width constraints - use default values, override below */
+    /* Default sizing */
-    width: fit-content !important;
+    width: 70px !important;
+    gap: 8px !important;
+    padding: 12px 8px !important;
   }
 
   /* Button base styles */
   .mt-action-btn .btn {
+    width: 3rem !important; /* Consistent button size */
+    height: 3rem !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 */
   }
 
   /* Icon base styling */
   .mt-action-btn .btn .material-symbols-rounded {
-    font-size: inherit !important; /* Use button's font-size */
+    font-size: 1.2rem !important; /* Consistent icon size */
     line-height: 1 !important; /* Prevent vertical misalignment */
     display: flex !important;
     align-items: center !important;
@@ -378,7 +397,7 @@ label {
   }
 
   .mt-action-bar {
-    margin-left: 0 !important; /* Reset margin since card handles spacing */
+    margin-left: 90px !important; /* Space for sidebar - keep this so action bar doesn't overlap */
     margin-right: 25px !important;
   }
 
@@ -392,64 +411,127 @@ label {
     margin-left: 0 !important;
   }
 
-  /* Custom scrollbar styling for sidebar */
+  /* Center pages container accounting for sidebar */
+  #pages-container {
+    margin: 0 auto !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    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 {
-    width: 4px; /* Thin scrollbar */
+    display: none !important; /* Hide scrollbar for WebKit browsers */
-  }
-
-  .mt-action-btn::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .mt-action-btn::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    background: var(--scroll-bar-thumb);
-  }
-
-  .mt-action-btn::-webkit-scrollbar-thumb:hover {
-    background: var(--scroll-bar-thumb-hover);
   }
 }
 
-/* Window narrowing only (no zoom) - normal-sized icons */
+/* 200% Zoom Level */
-@media only screen and (max-width: 1100px) and (max-resolution: 1.4dppx) {
+@media only screen and (max-width: 960px) {
+  /* Styles for 200% zoom level */
   .mt-action-btn {
-    gap: 8px !important; /* Normal spacing between buttons */
+    left: 5px !important; /* Small margin from viewport edge */
-    padding: 15px 10px !important; /* Normal padding */
+    top: 50% !important; /* Center vertically */
-    min-width: 70px !important; /* Larger minimum width */
+    transform: translateY(-50%) !important; /* Center using transform */
-    max-width: 90px !important; /* Larger maximum width */
+    min-height: 18rem !important;
-  }
 
-  .mt-action-btn .btn {
-    width: 3rem !important; /* Normal button size */
-    height: 3rem !important;
-    font-size: 0.9rem !important; /* Normal icon size */
-  }
-
-  .bg-card {
-    margin-left: 100px !important; /* Space for normal sidebar */
-    transition: margin-left 0.3s ease-in-out;
   }
 }
 
-/* Actual zoom detected - compact icons */
+/* 250% Zoom Level */
-@media only screen and (max-width: 1100px) and (min-resolution: 1.5dppx) {
+@media only screen and (max-width: 768px) {
+  /* Styles for 250% zoom level */
+
   .mt-action-btn {
-    gap: 6px !important; /* Compact spacing between buttons */
+    left: 5px !important; /* Closer to edge on mobile */
-    padding: 12px 8px !important; /* Compact padding */
+    width: 60px !important; /* Slightly smaller on mobile */
-    min-width: 60px !important; /* Minimum width fallback */
+    top: 50% !important; /* Center vertically */
-    max-width: 80px !important; /* Maximum width constraint */
+    transform: translateY(-50%) !important; /* Center using transform */
+    min-height: 18rem !important; /* 4x mobile button height (2.5rem x 4) */
   }
 
   .mt-action-btn .btn {
-    width: 2.5rem !important; /* Compact button size */
+    width: 2.5rem !important; /* Smaller buttons on mobile */
     height: 2.5rem !important;
-    font-size: 0.8rem !important; /* Smaller icon size */
+  }
+
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: 1rem !important; /* Smaller icons on mobile */
   }
 
   .bg-card {
-    margin-left: 90px !important; /* Space for compact sidebar */
+    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 */
+  }
+
+  /* Ensure pages stay centered on mobile too */
+  #pages-container {
+    margin: 0 auto !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    width: 100% !important; /* Use full available width within the card */
+  }
 }
 
+
+/* 300% Zoom Level */
+@media only screen and (max-width: 640px) {
+  /* Styles for 300% zoom level */
+  .mt-action-btn {
+    left: 5px !important; /* Small margin from viewport edge */
+    top: 50% !important; /* Center vertically */
+    transform: translateY(-50%) !important; /* Center using transform */
+    min-height: 10rem !important;
+
+  }
+}
+
+/* 400% Zoom Level */
+@media only screen and (max-width: 480px) {
+  /* Styles for 400% zoom level */
+  .mt-action-btn {
+    left: 2px !important; /* Small margin from viewport edge */
+    top: 50% !important; /* Center vertically */
+    transform: translateY(-50%) !important; /* Center using transform */
+    min-height: 10rem !important;
+  }
+  .mt-action-btn .btn {
+    width: 2rem !important; /* Smaller buttons on mobile */
+    height: 2rem !important;
+  }
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: .8rem !important; /* Smaller icons on mobile */
+  }
+}
+
+/* 500% Zoom Level */
+@media only screen and (max-width: 384px) {
+  /* Styles for 500% zoom level */
+  .mt-action-btn {
+    left: 2px !important; /* Small margin from viewport edge */
+    top: 50% !important; /* Center vertically */
+    transform: translateY(-50%) !important; /* Center using transform */
+    min-height: 8rem !important; /* 4x mobile button height (2.5rem x 4) */
+    width: 2.2rem;
+  }
+  .mt-action-btn .btn {
+    width: 2rem !important; /* Smaller buttons on mobile */
+    height: 2rem !important;
+  }
+  .mt-action-btn .btn .material-symbols-rounded {
+    font-size: .8rem !important; /* Smaller icons on mobile */
+  }
+}
+
+