mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-05-31 10:14:14 +00:00
## Fixes #1487 Reporter (@EldoonNemar): "The dialog text can't be seen due to the title bar being massive." ### Root cause `.byop-header` swelled to ~73px on mobile because: 1. `position: sticky` + `margin: -24px -24px 12px` assumed `.modal` desktop padding (24px) — but `.modal` switches to 16px padding at mobile, so the sibling-margin pushed the description paragraph UP into the sticky-pinned header band, occluding it. 2. `.btn-icon` close button floors at 48×48 (touch target) → forced header height ≥48px+padding. 3. H3 inherited a default emoji line-height that added more height on platforms with tall emoji ascent metrics. ### Fix (`public/style.css`) - Drop full-bleed negative-margin gymnastics — header uses normal in-flow padding (`4px 0`); `.modal` padding handles inset. - `max-height: 48px` on header so emoji ascent / btn-icon floor can't blow it past safe range. - Bound H3 explicitly (`font-size: 1rem; line-height: 1.3`). - Override `.byop-x` to compact 32px visual size; preserve ≥44px effective tap target via invisible `::before` pad (a11y safe). ### Verification Hot-swapped onto staging, CDP-measured both viewports: | viewport | hdrH | descTop ≥ hdrBottom | result | |---|---|---|---| | 390×844 mobile | 41px (was 73) | 341 ≥ 329 ✅ | clean | | 1280×800 desktop | 41px | 318 ≥ 306 ✅ | clean | ### TDD - **Red commit**:bb1a9f48— `test-issue-1487-byop-modal-layout-e2e.js` asserts header ≤56px AND description top ≥ header bottom on both viewports. Pre-fix: header=73px ⇒ FAIL. - **Green commit**:72a69b3e— CSS fix; assertions all pass against hot-swapped staging. - E2E added: `test-issue-1487-byop-modal-layout-e2e.js`; wired into `.github/workflows/deploy.yml` e2e job. ### Screenshots Before (mobile): description "Paste raw hex bytes..." clipped by oversized header. After: header 41px, description fully visible above textarea. --------- Co-authored-by: corescope-bot <bot@corescope.local>
This commit is contained in:
@@ -341,6 +341,7 @@ jobs:
|
||||
CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-channels-add-modal-e2e.js 2>&1 | tee -a e2e-output.txt
|
||||
CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-channels-share-color-e2e.js 2>&1 | tee -a e2e-output.txt
|
||||
CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-channels-ws-batch-e2e.js 2>&1 | tee -a e2e-output.txt
|
||||
CHROMIUM_REQUIRE=1 BASE_URL=http://localhost:13581 node test-issue-1487-byop-modal-layout-e2e.js 2>&1 | tee -a e2e-output.txt
|
||||
|
||||
- name: Collect frontend coverage (parallel)
|
||||
if: success() && github.event_name == 'push'
|
||||
|
||||
Reference in New Issue
Block a user