From 786a7ea9ce92aea00013e997affd0f99c692e5e0 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 14:35:39 +0000
Subject: [PATCH] fix: apply zoom to cv-container and footer to properly reduce
 document space

Changed zoom target from .cv-paper to .cv-container and .cv-footer to fix issue
where 50% zoom still reserved 100% document space creating empty areas. Both
elements now scale together, properly reducing space at low zoom levels while
keeping main action bar unaffected.

- Modified applyZoom() to target .cv-container and .cv-footer
- Added transform-origin, transition, and will-change to both CSS selectors
- Maintains proportional scroll compensation for smooth visual experience
---
 static/css/main.css |  6 ++++++
 static/js/main.js   | 14 +++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index d69c58b..d1848a4 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -498,6 +498,9 @@ iconify-icon {
     margin: 0 auto;
     padding: 20px 0 0 0; /* Top padding to prevent sticky action bar overlap */
     display: block; /* Changed from flex */
+    transform-origin: top center; /* Scale from top center - container stays anchored at top */
+    transition: transform 0.08s linear; /* Smooth, immediate zoom response */
+    will-change: transform; /* Hint browser to optimize for transforms */
 }
 
 /* Clean theme - no sidebars, centered content */
@@ -1697,6 +1700,9 @@ a:focus {
     padding: 20px 0;
     margin: 0;
     grid-column: 1 / -1; /* Span all columns */
+    transform-origin: top center; /* Scale from top center - footer stays anchored at top */
+    transition: transform 0.08s linear; /* Smooth, immediate zoom response */
+    will-change: transform; /* Hint browser to optimize for transforms */
 }
 
 .footer-content {
diff --git a/static/js/main.js b/static/js/main.js
index cab7295..18a5799 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -319,11 +319,12 @@
      * @param {boolean} saveToStorage - Whether to persist to localStorage
      */
     function applyZoom(zoomValue, saveToStorage = true) {
-        const cvPaper = document.querySelector('.cv-paper');
-        if (!cvPaper) return;
+        const cvContainer = document.querySelector('.cv-container');
+        const cvFooter = document.querySelector('.cv-footer');
+        if (!cvContainer) return;
 
         // Get current scale to calculate ratio
-        const currentTransform = cvPaper.style.transform;
+        const currentTransform = cvContainer.style.transform;
         const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
         const oldScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
 
@@ -334,8 +335,11 @@
             // Store current scroll position
             const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
-            // Apply the new scale
-            cvPaper.style.transform = `scale(${newScale})`;
+            // Apply the new scale to both container and footer
+            cvContainer.style.transform = `scale(${newScale})`;
+            if (cvFooter) {
+                cvFooter.style.transform = `scale(${newScale})`;
+            }
 
             // Calculate proportional scroll position to maintain visual position
             // If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500