diff --git a/.agents/phases/todo/04_reachable_share_cta/00_phase.md b/.agents/phases/todo/04_reachable_share_cta/00_phase.md new file mode 100644 index 0000000..386a490 --- /dev/null +++ b/.agents/phases/todo/04_reachable_share_cta/00_phase.md @@ -0,0 +1,133 @@ +# Phase 04 — The Share button must always be clickable + +**Source:** user request in chat — "the share button is cut off by the preview-stage, I can't click it in narrower view widths." +**Story:** n/a +**Context:** `src/mirror/static/app.css` `.share` / `.stage` / `.placeholder` / `.btn.big` (the `/* share */` block, ~L220–250), `src/mirror/static/mirror.html` (`#preview-stage` > `#preview`, `#placeholder` > `#start`, `#livetag`), `tests/test_app.py::TestStylesheet`, `tests/e2e/` + +## Objective + +`#start` ("Share my screen") is reachable and clickable at every viewport a +person might realistically open `/mirror` on — measured from 320×568 to 1920×1080, +and on short windows like 900×480. Today it is not, and this is not a cosmetic +wrinkle: a sharer on a phone, a narrow side-by-side window, or a small laptop +window **cannot start sharing at all**. + +## Measured on the reference host (Chromium, `channel="chromium"`, `http://127.0.0.1`) + +| Viewport | `#preview-stage` box | `#start` vs the stage box | `document.elementFromPoint(colour of button centre)` | +|---|---|---|---| +| 320×568 | 288×180 | button bottom **187 px below** the stage | `H2` — not the button | +| 360×640 | 328×205 | 132 px below | the panel's `#name` input | +| 390×844 | 358×224 | 113 px below | a `LABEL` | +| 480×800 | 448×280 | 36 px below | `#share-link` | +| 700×900 | 668×418 | inside | `#start` ✅ | +| 900×480 | 868×543 | inside the stage, **below the viewport** | `null` | +| 1280×450 | 902×564 | inside, **below the viewport** | `null` | + +Two independent failure modes, and the diagnosis is exact: + +1. **The stage is a two-row grid, not an overlay.** `.stage` is + `display: grid; place-items: center`, and its children — `