From ff93a3f3147e25323bb08f37e9a1339ac38d5bfc Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 16:53:28 +0000
Subject: [PATCH] fix: allow horizontal scroll and content expansion when
 zoomed beyond viewport

---
 static/css/main.css |  7 ++++---
 static/js/main.js   | 11 +++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index eb5718f..bbc3fc5 100644
--- a/static/css/main.css
+++ b/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);
-    border-color: rgba(39, 174, 96, 0.5);
-    color: rgba(255, 255, 255, 0.5);
+    background: rgb(23 210 102 / 50%);
+    border-color: rgb(21 103 55 / 20%);
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .zoom-reset-btn:active {
diff --git a/static/js/main.js b/static/js/main.js
index 8b22202..355b4f7 100644
--- a/static/js/main.js
+++ b/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);