review density: Cody gate — flex-shrink:0 on .revdens + .live so the toolbar slider doesn't float/squish between the flex:1 search and margin-auto indicator at 981-1100px; cap density at 5 (6-col dropped video thumbs to ~170px, too small for 16/9); aria-valuetext announces 'N columns' to screen readers

0e665e94b47ee84f5905a3474c2f3183ffb2111a · 2026-08-05 17:27:05 -0700 · Steve

Files touched

M public/review.html

Diff

commit 0e665e94b47ee84f5905a3474c2f3183ffb2111a
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 5 17:27:05 2026 -0700

    review density: Cody gate — flex-shrink:0 on .revdens + .live so the toolbar slider doesn't float/squish between the flex:1 search and margin-auto indicator at 981-1100px; cap density at 5 (6-col dropped video thumbs to ~170px, too small for 16/9); aria-valuetext announces 'N columns' to screen readers
---
 public/review.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/review.html b/public/review.html
index fd618fc3..050e455c 100644
--- a/public/review.html
+++ b/public/review.html
@@ -41,7 +41,7 @@
   .chips{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0 4px}
   .chips button{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:7px 13px;border:1px solid var(--line);background:#fff;color:var(--sub);border-radius:20px;cursor:pointer}
   .chips button.on{background:var(--red);border-color:var(--red);color:#fff}
-  .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase;margin-left:auto}
+  .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase;margin-left:auto;flex-shrink:0}
   .live .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}
   @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
   /* ── rails + cards ── */
@@ -50,7 +50,7 @@
   .sechead h2{font-size:16px;text-transform:uppercase;letter-spacing:.06em}
   .sechead .count{margin-left:auto;font-size:12px;color:var(--sub)}
   .cards{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:22px}
-  .revdens{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);white-space:nowrap}
+  .revdens{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);white-space:nowrap;flex-shrink:0}
   .revdens input[type=range]{width:100px;accent-color:var(--red);cursor:pointer}
   .vcard{display:block;cursor:pointer;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit}
   .vcard .thumb{aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#475569,#94a3b8);position:relative}
@@ -122,7 +122,7 @@
   <div class="wrap">
     <div class="toolbar">
       <input id="q" placeholder="Search The REview — companies, topics, markets…" autocomplete="off">
-      <label class="revdens">Density <input id="dens" type="range" min="2" max="6" step="1" value="4" aria-label="Catalog grid density (columns)"></label>
+      <label class="revdens">Density <input id="dens" type="range" min="2" max="5" step="1" value="4" aria-label="Catalog grid density" aria-valuetext="4 columns"></label>
       <span class="live"><span class="dot"></span><span id="freshness">live</span></span>
     </div>
     <div class="chips" id="chips"></div>
@@ -153,8 +153,8 @@ const esc=s=>(s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"
 // Density slider (Steve's every-grid rule). Sort is intentionally omitted: the catalog groups by
 // category rails (chips + search already drive browse) and the /api/videos records carry NO date
 // field, so a Newest/Oldest sort would have no data to order by. Density adjusts the desktop columns.
-let dens=String(Math.max(2,Math.min(6,parseInt(localStorage.getItem('rev.dens'),10)||4)));
-function applyDens(){document.documentElement.style.setProperty('--cols',dens);}
+let dens=String(Math.max(2,Math.min(5,parseInt(localStorage.getItem('rev.dens'),10)||4)));
+function applyDens(){document.documentElement.style.setProperty('--cols',dens);var _d=document.getElementById('dens');if(_d)_d.setAttribute('aria-valuetext',dens+' columns');}
 
 function chips(){
   const all=['all',...CATS];

← 48440b95 review (The REview): add density slider to the video catalog · back to Rentv · auto-save: 2026-08-05T17:44:25 (7 files) — data/deals-regist c7e15594 →