From 4fcade220752c0f53d3aceb53cdeb3bd42709c05 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 15:33:02 +0000
Subject: [PATCH] fix: use CSS zoom on wrapper to eliminate footer gap

Switched from transform: scale() to CSS zoom property on zoom-wrapper.
CSS zoom changes actual layout space, not just visual rendering:
- At 50% zoom, wrapper takes 50% space (no reserved empty space)
- Footer naturally follows right after zoomed content
- At 200% zoom, content extends beyond viewport with scrolling
- Fixes the large gray gap between content and footer
---
 static/css/main.css | 5 ++---
 static/js/main.js   | 9 +++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 1fa210a..f362e49 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -493,9 +493,8 @@ iconify-icon {
 
 /* Zoom Wrapper - wraps cv-container for zoom functionality */
 .zoom-wrapper {
-    transform-origin: top center; /* Scale from top center */
-    transition: transform 0.08s linear; /* Smooth zoom response */
-    will-change: transform; /* Optimize for transforms */
+    /* CSS zoom property changes actual layout space (not just visual) */
+    /* This allows footer to naturally position right after zoomed content */
 }
 
 /* Main CV Container */
diff --git a/static/js/main.js b/static/js/main.js
index 905c7b3..323e09a 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -350,12 +350,13 @@
         const zoomWrapper = document.getElementById('zoom-wrapper');
         if (!zoomWrapper) return;
 
-        // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
-        const scale = zoomValue / 100;
+        // Convert percentage to decimal (100 = 1.0, 50 = 0.5, etc.)
+        const zoomLevel = zoomValue / 100;
 
         requestAnimationFrame(() => {
-            // Apply zoom to wrapper - footer adjusts naturally below it
-            zoomWrapper.style.transform = `scale(${scale})`;
+            // Use CSS zoom on wrapper - changes actual layout space
+            // Footer will naturally follow right after the zoomed content
+            zoomWrapper.style.zoom = zoomLevel;
 
             // Update display
             updateZoomDisplay(zoomValue);