From 72a69b3e8e41b14ffb8a776269d368e816af8248 Mon Sep 17 00:00:00 2001
From: corescope-bot <bot@corescope.local>
Date: Fri, 29 May 2026 14:22:47 +0000
Subject: [PATCH] =?UTF-8?q?fix(#1487):=20BYOP=20modal=20=E2=80=94=20bounde?=
 =?UTF-8?q?d=20header,=20no=20body=20occlusion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: on mobile the .byop-header swelled to ~73px because:
  1) position:sticky + margin: -24px -24px 12px assumed .modal padding
     was always 24px, but .modal switches to 16px padding at mobile
     breakpoint — the 12px sibling-margin push then started the
     description paragraph INSIDE the (sticky-pinned) header band,
     visually clipping it;
  2) .btn-icon (the close X) floors at 48x48 (touch target), making the
     header at least 48px+padding;
  3) the H3 inherited a default emoji line-height that added more height
     on platforms with tall emoji ascent metrics.

Fix:
  - drop the full-bleed negative-margin gymnastics — header uses normal
    in-flow padding now (4px 0); .modal padding handles the inset.
  - max-height: 48px on the header so emoji ascent / btn-icon floor can
    never blow it past the safe range.
  - bound h3 font-size + line-height explicitly (1rem / 1.3).
  - override .byop-x to compact 32px visual size; preserve >=44px
    effective tap target via an invisible ::before pad (a11y safe).

Verified on staging (hot-swap test) at 390x844 mobile and 1280x800
desktop:
  - mobile: hdrH=41 (was 73), descTop=341 >= hdrBottom=329 — no overlap;
  - desktop: hdrH=41, descTop=318 >= hdrBottom=306.

E2E test from prior commit now goes green.

Fixes #1487
---
 public/style.css | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/public/style.css b/public/style.css
index 6b873ef5..5dfdd9a9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1333,18 +1333,45 @@ body.scroll-locked { overflow: hidden; }
 .byop-modal .byop-header {
   position: sticky; top: 0; z-index: 2;
   background: var(--card-bg);
-  margin: -24px -24px 12px;
-  padding: 12px 24px;
+  /* #1487: was `margin: -24px -24px 12px; padding: 12px 24px;` — assumed
+     .modal desktop padding of 24px. On mobile .modal switches to 16px
+     padding, so the negative margin overshot, content-flow pushed the
+     next sibling UP under the (sticky-pinned) header, and the
+     description paragraph was visually occluded by ~12px. Drop the
+     full-bleed negative-margin gymnastics — header now uses normal
+     padding (modal padding handles the inset) and bounded sizing. */
+  margin: 0 0 12px;
+  padding: 4px 0;
   border-bottom: 1px solid var(--border);
   display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  /* Hard cap so emoji ascent / btn-icon 48px floor can't blow the header
+     past the safe range (was 73px pre-fix). */
+  max-height: 48px;
+  box-sizing: border-box;
+}
+.byop-modal .byop-header h3 {
+  /* #1487: explicit font + line-height so emoji-bearing title doesn't
+     blow up the header on platforms where the default emoji font has
+     huge ascent metrics (observed contributor to 73px header). */
+  margin: 0; font-size: 1rem; line-height: 1.3;
 }
 /* MINOR-7: dropped position: sticky on .byop-x — it sits inside the
    already-sticky .byop-header, so the sticky on the child was a no-op.
-   We only need visual styling here. */
+   We only need visual styling here.
+   #1487: override .btn-icon 48px floor — inside the header we need a
+   compact button so the header stays bounded. The :before tap-target
+   pad below preserves accessibility (effective hit area ~ 44x44). */
 .byop-modal .byop-x {
   background: var(--card-bg); border: 1px solid var(--border);
-  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 16px;
+  border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 14px;
   line-height: 1; color: var(--text);
+  min-height: 0; min-width: 0; height: 32px;
+  position: relative;
+}
+/* #1487: invisible tap-pad to keep ≥44px effective hit area while the
+   visual button stays compact inside the bounded header. */
+.byop-modal .byop-x::before {
+  content: ''; position: absolute; inset: -8px; border-radius: 8px;
 }
 .byop-modal .byop-x:hover { background: var(--row-hover, rgba(0,0,0,0.05)); }