shared/render.js: reconcile prod drift — pull equalize toolbar markup (ctl-sort + ctl-density flex wrappers + space-between + range/search flex constraints) back into Mac2 source after directly-on-prod shipping earlier today. Mac2's card-hover-effect (aa83057) preserved untouched. Hashes now align on the equalize feature; only card-hover (4 CSS + 1 HTML line) remains Mac2-ahead.

af735a772ea60fe336416e5fb003bd9a382c0050 · 2026-05-28 16:55:24 -0700 · Steve Abrams

Files touched

M shared/render.js

Diff

commit af735a772ea60fe336416e5fb003bd9a382c0050
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu May 28 16:55:24 2026 -0700

    shared/render.js: reconcile prod drift — pull equalize toolbar markup (ctl-sort + ctl-density flex wrappers + space-between + range/search flex constraints) back into Mac2 source after directly-on-prod shipping earlier today. Mac2's card-hover-effect (aa83057) preserved untouched. Hashes now align on the equalize feature; only card-hover (4 CSS + 1 HTML line) remains Mac2-ahead.
---
 shared/render.js | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/shared/render.js b/shared/render.js
index 7883aad..f19cb8a 100644
--- a/shared/render.js
+++ b/shared/render.js
@@ -101,13 +101,15 @@ html[data-theme=dark] .theme-toggle .icon-moon{display:inline-block}
 
 /* controls */
 .controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:26px 0 20px;
-  border-bottom:1px solid var(--rule)}
+  justify-content:space-between;border-bottom:1px solid var(--rule)}
+.ctl-sort{display:flex;align-items:center;gap:10px;flex:1;min-width:260px;flex-wrap:wrap}
+.ctl-density{display:flex;align-items:center;gap:10px;flex:1;min-width:260px;justify-content:flex-end;flex-wrap:wrap}
 .controls label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
 .controls select,.controls input[type=search]{font-family:var(--sans);font-size:14px;padding:9px 12px;
   border:1px solid var(--rule);background:var(--card);color:var(--fg);border-radius:3px}
-.controls input[type=range]{accent-color:var(--accent)}
-.controls input[type=search]{min-width:220px}
-.count{margin-left:auto;font-size:13px;color:var(--muted)}
+.controls input[type=range]{flex:1;min-width:140px;max-width:200px;accent-color:var(--accent)}
+.controls input[type=search]{min-width:160px;flex:1}
+.count{font-size:13px;color:var(--muted)}
 
 /* grid */
 .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:26px;padding:36px 0 60px}
@@ -312,16 +314,20 @@ function catalogPage(cfg, products, q, sort, page, pages, total) {
     <p>${esc(clean(cfg.tagline))}</p>
   </div>
   <form class="controls" method="get" action="/catalog" id="ctlForm">
-    <input type="search" name="q" value="${esc(q)}" placeholder="Search ${total} patterns…">
-    <label for="sortSel">Sort</label>
-    <select name="sort" id="sortSel" onchange="document.getElementById('ctlForm').submit()">
-      ${sopt('newest','Newest')}${sopt('color','Color')}${sopt('light-dark','Light → Dark')}
-      ${sopt('dark-light','Dark → Light')}${sopt('style','Style')}${sopt('sku','SKU A→Z')}
-      ${sopt('title','Title A→Z')}${sopt('price-asc','Price ↑')}${sopt('price-desc','Price ↓')}
-    </select>
-    <label for="densSel">Density</label>
-    <input type="range" id="densSel" min="3" max="8" value="5">
-    <span class="count">${total} patterns${q?` · "${esc(q)}"`:''}</span>
+    <div class="ctl-sort">
+      <input type="search" name="q" value="${esc(q)}" placeholder="Search ${total} patterns…">
+      <label for="sortSel">Sort</label>
+      <select name="sort" id="sortSel" onchange="document.getElementById('ctlForm').submit()">
+        ${sopt('newest','Newest')}${sopt('color','Color')}${sopt('light-dark','Light → Dark')}
+        ${sopt('dark-light','Dark → Light')}${sopt('style','Style')}${sopt('sku','SKU A→Z')}
+        ${sopt('title','Title A→Z')}${sopt('price-asc','Price ↑')}${sopt('price-desc','Price ↓')}
+      </select>
+    </div>
+    <div class="ctl-density">
+      <label for="densSel">Density</label>
+      <input type="range" id="densSel" min="3" max="8" value="5">
+      <span class="count">${total} patterns${q?` · "${esc(q)}"`:''}</span>
+    </div>
   </form>
   <div class="grid" id="grid">${products.map(card).join('')}</div>
   ${pages>1?pager(q,sort,page,pages):''}

← aa83057 shared/render.js: universal hover-preview — stamp --card-bg · back to Dw Domain Fleet · shared/render.js: scrub vendor names from tag-chips fleet-wi 82e0968 →