From 3646475208c8de591291cb697baa4553691088d3 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Wed, 12 Nov 2025 14:59:54 +0000 Subject: [PATCH] fix: use CSS zoom property instead of transform scale Changed from transform: scale() to CSS zoom property which affects actual document layout space. At 50% zoom, content now takes 50% space instead of reserving full 100% height. This eliminates the large gray empty space issue. --- static/js/main.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index aa3e180..b6d393c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -323,15 +323,15 @@ const cvFooter = document.querySelector('.cv-footer'); if (!cvContainer) return; - // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.) - const newScale = zoomValue / 100; + // Convert percentage to decimal (100 = 1.0, 50 = 0.5, etc.) + const zoomLevel = zoomValue / 100; requestAnimationFrame(() => { - // Apply the new scale to both container and footer - // transform-origin: top center keeps content anchored at top - cvContainer.style.transform = `scale(${newScale})`; + // Use CSS zoom property which affects actual layout space + // Unlike transform: scale(), zoom reduces document space at lower values + cvContainer.style.zoom = zoomLevel; if (cvFooter) { - cvFooter.style.transform = `scale(${newScale})`; + cvFooter.style.zoom = zoomLevel; } // Update display