rent-rolls density: hide slider in Table view (Cody — dead control), cap to 1 col <=820px so density can't crush the DSCR calc, max 4 cols

c5e6497555cdf75710ced49b93ff6887692d4efb · 2026-08-03 10:08:47 -0700 · Steve Abrams

Files touched

M public/rent-rolls.html

Diff

commit c5e6497555cdf75710ced49b93ff6887692d4efb
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 3 10:08:47 2026 -0700

    rent-rolls density: hide slider in Table view (Cody — dead control), cap to 1 col <=820px so density can't crush the DSCR calc, max 4 cols
---
 public/rent-rolls.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/rent-rolls.html b/public/rent-rolls.html
index 6767bea..ca94149 100644
--- a/public/rent-rolls.html
+++ b/public/rent-rolls.html
@@ -31,6 +31,9 @@
      N-column grid driven by --cols; default 1 = the original stacked look, so no regression. */
   #rolls{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:18px;}
   #rolls .roll{margin-bottom:0;}
+  /* the .roll cards embed a DSCR calculator (fixed 1fr 1fr input rows) — force a single
+     column on narrow viewports so density can't crush the calculator below usable width. */
+  @media(max-width:820px){#rolls{grid-template-columns:1fr;}}
   .dens{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap;}
   .dens input[type=range]{accent-color:var(--acc,#4aa3ff);width:96px;}
   .roll h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
@@ -119,7 +122,7 @@
     <input class="search" id="q" type="text" placeholder="search all fields — address, city, zip, source, units, NOI, rent… (space = AND)">
     <div class="toggle" id="view"><button data-v="table" class="on">▦ Table</button><button data-v="cards">▤ Cards</button></div>
     <select id="sortsel" title="Sort rent rolls"></select>
-    <label class="dens" title="Card density — columns in Cards view">▦ <input type="range" id="cols" min="1" max="5" step="1" value="1"></label>
+    <label class="dens" title="Card density — columns in Cards view">▦ <input type="range" id="cols" min="1" max="4" step="1" value="1"></label>
     <div class="coldrop" id="coldrop">
       <button id="colbtn" title="Show / hide columns">Columns ▾</button>
       <div class="colmenu" id="colmenu"></div>
@@ -298,7 +301,10 @@ function filtered(){
   });
   return rows;
 }
+// density slider only applies to Cards view — hide it in Table view so it's never a dead control
+function syncDensVis(){ const d=document.querySelector('.dens'); if(d) d.classList.toggle('hide', view!=='cards'); }
 function render(){
+  syncDensVis();
   if(view==='table'){
     $('#tableView').classList.remove('hide'); $('#rolls').classList.add('hide');
     const rows=filtered(); const cols=visCols();

← 685b210 rent-rolls: add density slider (Steve HARD rule: every produ · back to Commercialrealestate · detail-modal drill enrichment: condos modal address→Google M 0d5ac4f →