From 9f95ad33993ea1987a0d445bb742869d3882faac Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 12:38:21 +0000
Subject: [PATCH] fix: dynamic page height on zoom and footer spacing
 improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed two issues with zoom and footer:

1. Dynamic height adjustment based on zoom level:
   - Store original height on first zoom (dataset.originalHeight)
   - Calculate scaled height: originalHeight × scale factor
   - Set container height dynamically to match visual content
   - Example: 50% zoom → height = originalHeight × 0.5
   - Prevents empty space below content at low zoom
   - Prevents overflow at high zoom

2. Footer spacing and positioning:
   - Reduced .cv-main bottom padding: 3rem → 1rem
   - Added .cv-footer margin-top: -60px to pull footer up
   - Increased .zoom-control bottom: 70px → 100px
   - Zoom control now clears footer GitHub link

Result:
- Footer appears immediately after content at any zoom level
- No wasted empty space below content
- Zoom control doesn't overlap GitHub link
- Page height dynamically adapts to zoom level
---
 static/css/main.css |  5 +++--
 static/js/main.js   | 13 +++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 5651d99..28cdec3 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -733,7 +733,7 @@ iconify-icon {
 /* Main Content - Right column */
 .cv-main {
     background: var(--paper-white);
-    padding: 3rem 2.5rem;
+    padding: 3rem 2.5rem 1rem 2.5rem; /* Reduced bottom padding to minimize footer space */
 }
 
 /* Professional Title Badges - Spans Both Columns */
@@ -1696,6 +1696,7 @@ a:focus {
     color: #ccc;
     padding: 20px 0;
     margin: 0;
+    margin-top: -60px; /* Move footer up to reduce space and clear zoom control */
     grid-column: 1 / -1; /* Span all columns */
 }
 
@@ -3468,7 +3469,7 @@ html {
 
 .zoom-control {
     position: fixed;
-    bottom: 70px;
+    bottom: 100px; /* Increased from 70px to clear footer */
     left: 50%;
     transform: translateX(-50%);
     z-index: 900;
diff --git a/static/js/main.js b/static/js/main.js
index cab7295..08b51fa 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -334,9 +334,22 @@
             // Store current scroll position
             const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
+            // Get the natural height before any transform
+            if (!cvPaper.dataset.originalHeight) {
+                // Store original height on first zoom
+                cvPaper.style.transform = 'scale(1)';
+                cvPaper.dataset.originalHeight = cvPaper.scrollHeight;
+            }
+
+            const originalHeight = parseInt(cvPaper.dataset.originalHeight);
+
             // Apply the new scale
             cvPaper.style.transform = `scale(${newScale})`;
 
+            // Adjust the container height to match the scaled content
+            // This prevents empty space when zooming out and content overflow when zooming in
+            cvPaper.style.height = `${originalHeight * newScale}px`;
+
             // Calculate proportional scroll position to maintain visual position
             // If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500
             // So we need to scroll to pixel 500 to see the same content