iPad fix: header nav becomes swipeable strip + grid minmax, no horizontal overflow on tablet

1cdd91f78779bda02d1b2ff7b23b62df61bd2ba8 · 2026-07-16 11:49:52 -0700 · Steve

- Wrap header nav links + scenario seg in .topnav; on <=1024px it's a
  swipeable horizontal strip (fixed 1-row header preserves sticky offsets)
  instead of clipping off-screen.
- grid tracks -> minmax(0,1fr) + 2 cols through the docked-drawer band so
  cards aren't crushed on iPad landscape.
- html+body overflow-x:hidden, title/sub ellipsis, un-stick .bar on tablet.
- Verified in WebKit (iPad Safari engine) at 768/820/1024 both orientations:
  zero horizontal scroll, drawer + nav touch work, no JS errors.

Files touched

M public/index.html

Diff

commit 1cdd91f78779bda02d1b2ff7b23b62df61bd2ba8
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Jul 16 11:49:52 2026 -0700

    iPad fix: header nav becomes swipeable strip + grid minmax, no horizontal overflow on tablet
    
    - Wrap header nav links + scenario seg in .topnav; on <=1024px it's a
      swipeable horizontal strip (fixed 1-row header preserves sticky offsets)
      instead of clipping off-screen.
    - grid tracks -> minmax(0,1fr) + 2 cols through the docked-drawer band so
      cards aren't crushed on iPad landscape.
    - html+body overflow-x:hidden, title/sub ellipsis, un-stick .bar on tablet.
    - Verified in WebKit (iPad Safari engine) at 768/820/1024 both orientations:
      zero horizontal scroll, drawer + nav touch work, no JS errors.
---
 public/index.html | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index fb11528..7d62e00 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,6 +21,8 @@
   .htitle h1 { margin:0; font-size:18px; letter-spacing:.2px; }
   .htitle .sub { color:var(--mut); font-size:12px; }
   header .spacer { margin-left:auto; }
+  /* nav-link cluster; on wide screens it sits inline right-aligned, on tablets/phones it becomes a swipeable strip (see @media 1024) */
+  .topnav { display:flex; align-items:center; flex-wrap:nowrap; }
   .seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
   .seg button { background:var(--card); color:var(--ink); border:0; border-right:1px solid var(--line); padding:8px 11px; font-size:12px; cursor:pointer; }
   .seg button:last-child { border-right:0; }
@@ -55,14 +57,26 @@
   .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; }
-  .grid { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:22px; padding:30px 32px 44px; }
-  @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr);} }
-  @media (max-width:620px){ .grid{ grid-template-columns:1fr;}
-    header{ flex-wrap:wrap; gap:10px; }              /* let the scenario seg-control drop to its own row instead of overflowing */
-    header .spacer{ margin-left:0; width:100%; }
-    .bar{ top:auto; }
-    body{ overflow-x:hidden; }                        /* belt+braces: no horizontal scroll on phones */
+  .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,
+         turn the nav-link cluster into a swipeable horizontal strip instead of clipping off-screen. ---- */
+  @media (max-width:1024px){
+    .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }  /* docked-drawer band: 2 cols so cards aren't crushed (iPad landscape) */
+    header{ flex-wrap:nowrap; gap:10px; }
+    header .spacer{ display:none; }                    /* nav no longer right-pushed; topnav flexes to fill */
+    .htitle{ min-width:0; flex:0 1 auto; }             /* let the title shrink instead of shoving nav off-screen */
+    .htitle h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+    .htitle .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }  /* keep title block 2 lines → header stays ~57px so sticky bar/drawer offsets hold */
+    .topnav{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden;
+             -webkit-overflow-scrolling:touch; scrollbar-width:none; }  /* iOS momentum-scroll, hidden scrollbar */
+    .topnav::-webkit-scrollbar{ display:none; }
+    .topnav > a, .topnav > .seg{ flex:0 0 auto; }      /* items keep intrinsic width; strip scrolls, nothing clips */
+    .topnav > a{ padding:8px 0; }                      /* taller touch target for finger taps */
+    html, body{ overflow-x:hidden; max-width:100%; }   /* no horizontal page scroll on iPad (html is the scroller) */
+    .bar{ max-width:100%; top:auto; }                   /* sort/density strip: no hairline overflow; un-stick so it can't tuck under the taller (burger+title) iPad header */
   }
+  @media (max-width:620px){ .grid{ grid-template-columns:1fr;} }
   .card { background:var(--card); border:2px solid #fff; border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px; position:relative; transition:box-shadow .2s,border-color .2s; }
   .card.uc { opacity:.62; }
   .card.flash { border-color:var(--blue); box-shadow:0 0 0 3px rgba(88,166,255,.35); }
@@ -251,6 +265,7 @@
     <div class="sub" id="sub">loading…</div>
   </div>
   <div class="spacer"></div>
+  <div class="topnav">
   <a href="/crcp.html" style="color:var(--warn);text-decoration:none;font-size:13px;margin-right:12px" title="Commercial Real Estate Control Panel (live)">🛰️ CRCP</a>
   <a href="/map.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="All properties on a map, colored by type, with overhead aerial photos">🗺️ Map</a>
   <a href="/mls.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="MLS-style spreadsheet + grid — all property data, sortable & searchable">📋 MLS</a>
@@ -268,6 +283,7 @@
     <button data-s="30">30% down</button>
     <button data-s="cash">All cash</button>
   </span>
+  </div><!-- /.topnav -->
 </header>
 
 <div id="scrim"></div>

← 30822fa auto-save: 2026-07-16T07:11:48 (1 files) — data/alerts-state · back to Commercialrealestate · afternoon CRE update 2026-07-16 b59aea1 →