From c89bb43fc8d954bfbfd33e19a82a44069df9d20a Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 15:05:29 +0000
Subject: [PATCH] feat: hide zoom control on mobile devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide zoom control on mobile viewports (≤768px) via CSS
- Skip loading saved zoom on mobile, always use 100%
- Add resize handler to reset zoom when switching to mobile view
- Clean up unnecessary mobile-specific zoom styles
- Prevents confusion on touch devices where zoom is less useful
---
 static/css/main.css | 25 +------------------------
 static/js/main.js   | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index d1848a4..22813df 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3642,30 +3642,7 @@ html {
 /* Mobile Responsive - Smaller on mobile */
 @media (max-width: 768px) {
     .zoom-control {
-        bottom: 50px;
-        padding: 0.4rem 0.8rem;
-        gap: 0.4rem;
-    }
-
-    .zoom-slider {
-        width: 140px;
-    }
-
-    .zoom-value {
-        font-size: 0.7rem;
-        min-width: 25px;
-    }
-
-    .zoom-value-current {
-        font-size: 0.8rem;
-        min-width: 30px;
-    }
-
-    .zoom-reset-btn {
-        min-width: 38px;
-        min-height: 38px;
-        font-size: 0.7rem;
-        padding: 0.4rem;
+        display: none; /* Hide zoom control on mobile - not useful on small screens */
     }
 }
 
diff --git a/static/js/main.js b/static/js/main.js
index b6d393c..597f1db 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -258,9 +258,17 @@
     // ZOOM CONTROL
     // =============================================================================
 
+    /**
+     * Check if we're on mobile viewport
+     * @returns {boolean} True if mobile (viewport <= 768px)
+     */
+    function isMobileView() {
+        return window.innerWidth <= 768;
+    }
+
     /**
      * Initialize zoom control on page load
-     * Restores saved zoom level from localStorage
+     * Restores saved zoom level from localStorage (desktop only)
      */
     function initZoomControl() {
         const slider = document.getElementById('zoom-slider');
@@ -269,7 +277,14 @@
 
         if (!slider || !cvPaper) return;
 
-        // Restore saved zoom level
+        // On mobile, always use 100% zoom (zoom control is hidden anyway)
+        if (isMobileView()) {
+            slider.value = 100;
+            applyZoom(100, false);
+            return; // Skip event listeners on mobile
+        }
+
+        // Desktop: Restore saved zoom level from localStorage
         const savedZoom = localStorage.getItem('cv-zoom');
         if (savedZoom) {
             const zoomValue = parseInt(savedZoom, 10);
@@ -311,6 +326,19 @@
                 }
             }
         });
+
+        // Handle window resize - reset zoom when switching to mobile
+        let resizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(function() {
+                if (isMobileView()) {
+                    // Reset to 100% zoom when switching to mobile
+                    slider.value = 100;
+                    applyZoom(100, false);
+                }
+            }, 250); // Debounce resize events
+        });
     }
 
     /**