CRCP index: fix overlapping UI — bar controls no longer spill under the #ctrlrail

0938efcba0bb0c0656c3a82448973dd5b5b03928 · 2026-08-20 12:14:49 -0700 · Steve Abrams

.bar .right was display:flex with NO wrap, so when the new right-hand Controls rail (be1fb30) shrank
main to ~650px the search/Heat/Sort group overflowed to ~930px and painted OVER the rail (bar z-index:20
vs rail auto). Added flex-wrap:wrap + justify-content:flex-end + min-width:0 so it wraps within the bar.
Verified in a real browser at 1238px (Steve's width): .bar .right right-edge 946 <= main 966, zero rail overlap.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public/index.html

Diff

commit 0938efcba0bb0c0656c3a82448973dd5b5b03928
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 20 12:14:49 2026 -0700

    CRCP index: fix overlapping UI — bar controls no longer spill under the #ctrlrail
    
    .bar .right was display:flex with NO wrap, so when the new right-hand Controls rail (be1fb30) shrank
    main to ~650px the search/Heat/Sort group overflowed to ~930px and painted OVER the rail (bar z-index:20
    vs rail auto). Added flex-wrap:wrap + justify-content:flex-end + min-width:0 so it wraps within the bar.
    Verified in a real browser at 1238px (Steve's width): .bar .right right-edge 946 <= main 966, zero rail overlap.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 0bbe6f5..1412636 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,7 +63,7 @@
   .bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:11px 20px; border-bottom:1px solid var(--line); position:sticky; top:57px; background:var(--headbg); backdrop-filter:blur(6px); z-index:20; }
   .bar .count { font-size:13px; color:var(--mut); } .bar .count b { color:var(--ink); }
   .bar label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
-  .bar .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
+  .bar .right { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; min-width:0; }  /* wrap so the search/heat/sort controls can't overflow under the right-hand #ctrlrail when main is narrow */
   .grid { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:22px; padding:30px 32px 44px; }
   @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr));} }
   /* ---- iPad / tablet / narrow-desktop band (≤1024): keep header ONE fixed row so sticky offsets hold,

← cc28893 CRCP index: ALWAYS show agent/phone/firm/broker on the list · back to Commercialrealestate · CRCP: resolve popup double-fire — ONE row-expand panel, serv 1b7ba1f →