fix(/designs mobile): clamp density slider for narrow viewports (inline --cols was overriding @media breakpoints); always-show heart + NEW on touch devices via @media (hover: none)

c6bcfc547370452a88c6b92b3933310391741f7a · 2026-05-14 09:20:39 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit c6bcfc547370452a88c6b92b3933310391741f7a
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 09:20:39 2026 -0700

    fix(/designs mobile): clamp density slider for narrow viewports (inline --cols was overriding @media breakpoints); always-show heart + NEW on touch devices via @media (hover: none)
---
 server.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index 6f05b49..4f59385 100644
--- a/server.js
+++ b/server.js
@@ -3622,6 +3622,13 @@ ${cat === 'mural-scenic' ? `
       .design-card:hover .fav-btn,
       .design-card:focus-within .fav-btn,
       .fav-btn.is-fav { opacity:1 }
+      /* Touch devices have no :hover — keep heart + NEW always visible there
+         so mobile users can actually save designs and see the NEW pill.
+         (hover: none) targets phones/tablets without an associated mouse. */
+      @media (hover: none) {
+        .fav-btn,
+        .card-new-badge { opacity:1 }
+      }
       /* Hover layer on every catalog card — pattern number + View / Sample.
          Sits inside .card-img so it picks up the existing aspect-ratio box.
          pointer-events:none on the wrapper lets clicks fall through to the
@@ -3874,11 +3881,22 @@ ${FOOTER}
   var grid   = document.getElementById('catalog-grid');
   var saved  = localStorage.getItem('wallco-density');
   if (saved) slider.value = saved;
-  grid.style.setProperty('--cols', slider.value);
+  // Clamp inline --cols for narrow viewports so a desktop "density=8" pref
+  // doesn't crush mobile to 45px tiles. Inline style beats stylesheet
+  // specificity, so the @media (max-width: 600px) {--cols:2} rule otherwise
+  // gets ignored. clamp() also re-evaluates on resize via the listener below.
+  function applyCols(v){
+    var w = window.innerWidth, n = parseInt(v, 10);
+    if (w <= 600)      n = Math.min(n, 2);
+    else if (w <= 900) n = Math.min(n, 3);
+    grid.style.setProperty('--cols', String(n));
+  }
+  applyCols(slider.value);
   slider.addEventListener('input', function() {
-    grid.style.setProperty('--cols', this.value);
+    applyCols(this.value);
     localStorage.setItem('wallco-density', this.value);
   });
+  window.addEventListener('resize', function(){ applyCols(slider.value); });
   var sortSel = document.getElementById('sort-select');
   var sortH   = document.getElementById('sort-hidden');
   if (sortSel && sortH) {

← 1ba619e chore(deploy): gitignore .deploy.conf (per-machine config) · back to Wallco Ai · feat(/designs): density slider shows current col count + ari 2cc97c7 →