Click site → show all products as a responsive grid (was horizontal scroll)

f016e8f0a8a437be085ca09e8c4148110c4f7998 · 2026-05-06 17:17:29 -0700 · SteveStudio2

Previous .products-slider .row was a horizontal flex with 110px cards and
overflow-x:auto — only ~6 cards visible at a time, lots of horizontal
scrolling to see everything.

Now: display:grid, grid-template-columns:repeat(auto-fill,minmax(140px,1fr)),
gap:10px. Every product visible at once; cards bigger (140-200+ px) and
labels can wrap to 2 lines via -webkit-line-clamp:2 with min-height:32px so
rows align. Selection, bulk-remove, copy SKUs all unchanged.

Files touched

M public/index.html

Diff

commit f016e8f0a8a437be085ca09e8c4148110c4f7998
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 6 17:17:29 2026 -0700

    Click site → show all products as a responsive grid (was horizontal scroll)
    
    Previous .products-slider .row was a horizontal flex with 110px cards and
    overflow-x:auto — only ~6 cards visible at a time, lots of horizontal
    scrolling to see everything.
    
    Now: display:grid, grid-template-columns:repeat(auto-fill,minmax(140px,1fr)),
    gap:10px. Every product visible at once; cards bigger (140-200+ px) and
    labels can wrap to 2 lines via -webkit-line-clamp:2 with min-height:32px so
    rows align. Selection, bulk-remove, copy SKUs all unchanged.
---
 public/index.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0683a6b..20a9277 100644
--- a/public/index.html
+++ b/public/index.html
@@ -116,21 +116,23 @@ aside { border-left: 1px solid var(--rule); background: var(--bg2);
 
 /* Products slider grid (right pane, below the hero) */
 .products-slider { position: relative; margin-bottom: 22px }
-.products-slider .row { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
+/* Grid layout — every product visible at once (was horizontal scroll). */
+.products-slider .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
   scroll-snap-type: x mandatory; padding-bottom: 8px;
   scrollbar-width: thin; scrollbar-color: var(--rule) transparent }
 .products-slider .row::-webkit-scrollbar { height: 6px }
 .products-slider .row::-webkit-scrollbar-thumb { background: var(--rule) }
-.products-slider .pcard { flex: 0 0 110px; scroll-snap-align: start;
+.products-slider .pcard {
   background: var(--bg); border: 1px solid var(--rule); cursor: pointer;
   display: flex; flex-direction: column; transition: border-color .15s, transform .1s; position: relative }
 .products-slider .pcard:hover { border-color: var(--gold) }
 .products-slider .pcard.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) }
 .products-slider .pcard .img { aspect-ratio: 1/1; background: #000; overflow: hidden }
 .products-slider .pcard .img img { width: 100%; height: 100%; object-fit: cover; display: block }
-.products-slider .pcard .label { padding: 6px 7px; font-size: 9px; line-height: 1.3;
+.products-slider .pcard .label { padding: 7px 9px; font-size: 10px; line-height: 1.35;
   letter-spacing: 0.02em; color: var(--ink); border-top: 1px solid var(--rule);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  min-height: 32px }
 .products-slider .pcard .check { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px;
   border: 1px solid var(--gold); background: rgba(12,10,8,0.78); color: var(--gold);
   font-size: 11px; line-height: 14px; text-align: center; font-weight: 700 }

← 3f6faec bulk product remove-from-list (server endpoint + UI button) · back to Dw Collections Viewer · Drag product → cover image + sort by color/style/SKU + grid- 3a36c5f →