v0.4 #5 follow-up: hide brand-name + tighten header actions at <769px

de5a0343fd29d765e8151b7de3114fc6d37830aa · 2026-05-06 14:13:04 -0700 · SteveStudio2

QA pass on https://nationalpaperhangers.com showed 2px overflow at 380 viewport
(.header-actions = 382px) and 12px overflow on /watch (auto-fill 360px minmax
forced single columns wider than viewport). Fixes:

- header-inner: padding 14/16 (was 32 desktop), wrap actions
- header-actions .btn: 6/10 padding, 12px font (down from 14)
- brand-name: display none — keep N·P·H mark only on phone
- watch-grid: force 1-col w/ !important to override the 360px auto-fill minmax
- watch-page padding 24/16 (was 48/32)

Playwright headless QA at 380×720 against prod: zero overflow on /find /watch
/installer/:slug /map (leaflet tile-pane is overflow:hidden so its tiles
aren't real horizontal overflow).

Files touched

M public/css/public.css

Diff

commit de5a0343fd29d765e8151b7de3114fc6d37830aa
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 6 14:13:04 2026 -0700

    v0.4 #5 follow-up: hide brand-name + tighten header actions at <769px
    
    QA pass on https://nationalpaperhangers.com showed 2px overflow at 380 viewport
    (.header-actions = 382px) and 12px overflow on /watch (auto-fill 360px minmax
    forced single columns wider than viewport). Fixes:
    
    - header-inner: padding 14/16 (was 32 desktop), wrap actions
    - header-actions .btn: 6/10 padding, 12px font (down from 14)
    - brand-name: display none — keep N·P·H mark only on phone
    - watch-grid: force 1-col w/ !important to override the 360px auto-fill minmax
    - watch-page padding 24/16 (was 48/32)
    
    Playwright headless QA at 380×720 against prod: zero overflow on /find /watch
    /installer/:slug /map (leaflet tile-pane is overflow:hidden so its tiles
    aren't real horizontal overflow).
---
 public/css/public.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/css/public.css b/public/css/public.css
index 31f79e0..40af250 100644
--- a/public/css/public.css
+++ b/public/css/public.css
@@ -178,8 +178,13 @@
   .map-controls > * { width: 100%; box-sizing: border-box; }
   .reserve-banner-inner { flex-direction: column; align-items: flex-start; }
   .reserve-banner .reserve-cta { width: 100%; }
+  .header-inner { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
   .primary-nav { gap: 12px; flex-wrap: wrap; }
-  .header-actions { gap: 8px; }
+  .header-actions { gap: 8px; flex-wrap: wrap; }
+  .header-actions .btn { padding: 6px 10px; font-size: 12px; }
+  .brand-name { display: none; } /* keep brand-mark only on phone */
+  .watch-grid { grid-template-columns: 1fr !important; gap: 16px; }
+  .watch-page { padding: 24px 16px 64px; }
   .find-page, .featured, .how-it-works, .for-installers-cta, .installer-profile, .long-form, .booking-confirmation { padding: 32px 16px; }
   .display-sm { font-size: 28px; line-height: 1.15; }
   .installer-grid { grid-template-columns: 1fr; gap: 16px; }

← 9bcbde8 v0.4 #5: load theme-toggle.js + /find↔/map filter parity + t · back to NationalPaperHangers · v0.5: bootstrap Stripe products+prices+webhook for NPH 8dd327f →