fix: allow horizontal scroll and content expansion when zoomed beyond viewport

static/css/main.css

@@ -34,6 +34,7 @@ body {
     line-height: 1.5;
     font-size: 16px;
     font-weight: 400;
+    overflow-x: auto; /* Allow horizontal scroll when zoomed */
 }
 
 a {
@@ -3673,9 +3674,9 @@ html {
 
 /* Green hover only when zoom is not at default (100) */
 .zoom-reset-btn.zoom-not-default:hover {
-    background: rgba(39, 174, 96, 0.5);
+    background: rgb(23 210 102 / 50%);
-    border-color: rgba(39, 174, 96, 0.5);
+    border-color: rgb(21 103 55 / 20%);
-    color: rgba(255, 255, 255, 0.5);
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .zoom-reset-btn:active {

static/js/main.js

@@ -357,6 +357,17 @@
             // Use CSS zoom property - it properly affects layout and extends beyond viewport
             zoomWrapper.style.zoom = zoomLevel;
 
+            // When zoom > 100%, set a min-width to allow horizontal expansion beyond viewport
+            // This allows the content to grow larger than the viewport width
+            if (zoomLevel > 1) {
+                const viewportWidth = window.innerWidth;
+                // Set min-width to ensure content can expand beyond viewport
+                zoomWrapper.style.minWidth = `${viewportWidth}px`;
+            } else {
+                // Reset to default when zoom <= 100%
+                zoomWrapper.style.minWidth = '';
+            }
+
             // Update display
             updateZoomDisplay(zoomValue);