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/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);