feat(/designs mobile): chip-rows scroll horizontally on phones instead of wrapping to 5+ lines; fade-mask on right edge hints scrollability; cuts iPhone-SE toolbar height ~420→180px so grid surfaces above fold

a624fa8c4d9ca44c1650df16a1b0c3622736bca4 · 2026-05-14 12:56:07 -0700 · SteveStudio2

Files touched

M public/css/site.css

Diff

commit a624fa8c4d9ca44c1650df16a1b0c3622736bca4
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 12:56:07 2026 -0700

    feat(/designs mobile): chip-rows scroll horizontally on phones instead of wrapping to 5+ lines; fade-mask on right edge hints scrollability; cuts iPhone-SE toolbar height ~420→180px so grid surfaces above fold
---
 public/css/site.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/public/css/site.css b/public/css/site.css
index fb545f3..cdb153a 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -877,4 +877,29 @@ main { padding-top: 73px; }
   .cta-band { padding: 48px 20px; }
   .hero-wordmark-below { padding: 28px 20px 18px; }
   .btn-outline { margin-left: 0; margin-top: 8px; }
+  /* Toolbar chip-rows scroll horizontally on phones instead of wrapping to
+     5+ lines. Cuts the toolbar height from ~420px to ~180px on iPhone SE,
+     so the grid actually surfaces above the fold. The leading label
+     (HUE / MOTIF / PREVIEW) stays pinned via sticky positioning. */
+  .hue-swatches,
+  .motif-chips {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+    padding-bottom: 4px; /* room for any iOS scrollbar */
+    /* Hide scrollbar visually on touch — the swipe gesture is the affordance. */
+    scrollbar-width: none;
+  }
+  .hue-swatches::-webkit-scrollbar,
+  .motif-chips::-webkit-scrollbar { display: none; }
+  .hue-swatches > *,
+  .motif-chips > * { flex-shrink: 0; scroll-snap-align: start; }
+  /* Soft fade on the right edge to hint at scrollable content. */
+  .hue-swatches,
+  .motif-chips {
+    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
+  }
 }

← dba51ee feat(/design/:id): add BreadcrumbList JSON-LD alongside exis · back to Wallco Ai · perf(/designs): content-visibility:auto on .design-card — br 89a97b5 →