first commit

static/js/main.js

@@ -357,15 +357,19 @@
             // Use CSS zoom property - it properly affects layout and extends beyond viewport
             zoomWrapper.style.zoom = zoomLevel;
 
-            // When zoom > 100%, set a min-width to allow horizontal expansion beyond viewport
-            // This allows the content to grow larger than the viewport width
+            // When zoom > 100%, allow the wrapper to expand beyond viewport width
+            // Set width to accommodate the expanded content without bounds
             if (zoomLevel > 1) {
-                const viewportWidth = window.innerWidth;
-                // Set min-width to ensure content can expand beyond viewport
-                zoomWrapper.style.minWidth = `${viewportWidth}px`;
+                // Set width to auto to allow natural expansion
+                zoomWrapper.style.width = 'auto';
+                zoomWrapper.style.minWidth = '100%';
+                // Remove max-width constraint to allow horizontal expansion
+                zoomWrapper.style.maxWidth = 'none';
             } else {
                 // Reset to default when zoom <= 100%
+                zoomWrapper.style.width = '';
                 zoomWrapper.style.minWidth = '';
+                zoomWrapper.style.maxWidth = '';
             }
 
             // Reset zoom on fixed buttons so they stay same size
@@ -383,6 +387,9 @@
             if (saveToStorage) {
                 localStorage.setItem('cv-zoom', zoomValue.toString());
             }
+
+            // Update zoom control position for horizontal scroll
+            updateZoomControlPosition();
         });
     }
 
@@ -429,6 +436,32 @@
         applyZoom(newZoom, true);
     }
 
+    /**
+     * Update zoom control position based on horizontal scroll
+     * This keeps the zoom control centered relative to the visible viewport
+     */
+    function updateZoomControlPosition() {
+        const zoomControl = document.getElementById('zoom-control');
+        if (!zoomControl || isMobileView()) return;
+
+        // Only adjust if zoom control is in default centered position
+        // (not dragged to a custom position)
+        const savedPosition = localStorage.getItem('cv-zoom-position');
+        if (savedPosition) return; // Don't adjust if user has dragged it
+
+        // Get current horizontal scroll position
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+        // Update left position to account for horizontal scroll
+        if (scrollLeft > 0) {
+            // Adjust position to stay centered in viewport during horizontal scroll
+            zoomControl.style.left = `calc(50% + ${scrollLeft}px)`;
+        } else {
+            // Reset to center when scroll is at start
+            zoomControl.style.left = '50%';
+        }
+    }
+
     /**
      * Make zoom control draggable and persist position
      */
@@ -708,6 +741,9 @@
             const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
             const isMenuOpen = navMenu.classList.contains('menu-open');
 
+            // Update zoom control position on horizontal scroll
+            updateZoomControlPosition();
+
             // Check if at bottom of page (within 50px threshold)
             const scrollHeight = document.documentElement.scrollHeight;
             const clientHeight = document.documentElement.clientHeight;