From 15834a6d6b2245c207aefcd0a639b3ce3a701eb2 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 16:24:21 +0000
Subject: [PATCH] fix: switch from CSS zoom to transform scale for true
 unlimited zoom

- Replace CSS zoom with transform: scale() for proper viewport extension
- Add dynamic margin-bottom to position footer correctly
- Remove zoom: 1 reset from fixed buttons (no longer needed)
- Enables true zoom from 10% to 500% that extends beyond viewport
---
 static/css/main.css |  2 --
 static/js/main.js   | 11 ++++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 85b0a65..72f4be5 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2592,7 +2592,6 @@ html {
     z-index: 99;
     transition: all 0.3s ease;
     opacity: 0.2;
-    zoom: 1; /* Prevent zoom inheritance */
 }
 
 .back-to-top:hover {
@@ -2644,7 +2643,6 @@ html {
     z-index: 99;
     transition: all 0.3s ease;
     opacity: 0.2;
-    zoom: 1; /* Prevent zoom inheritance */
 }
 
 .info-button:hover {
diff --git a/static/js/main.js b/static/js/main.js
index 7324ec7..ad16680 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -354,9 +354,14 @@
         const zoomLevel = zoomValue / 100;
 
         requestAnimationFrame(() => {
-            // Use CSS zoom on wrapper - changes actual layout space
-            // Footer will naturally follow right after the zoomed content
-            zoomWrapper.style.zoom = zoomLevel;
+            // Use transform scale for true zoom that extends beyond viewport
+            zoomWrapper.style.transform = `scale(${zoomLevel})`;
+            zoomWrapper.style.transformOrigin = 'top center';
+
+            // Adjust wrapper height to account for scale
+            // This ensures the footer appears at the correct position
+            const originalHeight = zoomWrapper.scrollHeight;
+            zoomWrapper.style.marginBottom = `${originalHeight * (zoomLevel - 1)}px`;
 
             // Update display
             updateZoomDisplay(zoomValue);