Three regions and a footer: the layout the sheet can never overlap #15

New issue

Closed

opened 2026-08-10 12:42:38 +00:00 by aiko · 1 comment

aiko commented

2026-08-10 12:42:38 +00:00

Owner

Parent

What to build

The screen becomes four fixed regions — status bar, Cue, sheet, footer — instead of a sheet floating over a strip. Overlap stops being something to cap and becomes something that cannot be expressed. docs/design-notes.md records how the overlap arises today.

Status bar, one line, always. Position, play state, and nothing else. The device name is dropped — it only matters in the picker, where you are choosing between screens, and dropping it is what makes one line possible. frozen +0:14 gets its own slim strip above the footer when frozen, rather than living up here.

Cue region. Flexible, shrinks when the sheet opens, Cue re-centres in whatever is left. The Cue wraps — up to three lines, centred. Today it clips mid-character at the right edge, which is the bug this fixes.

Sheet region. Capped at 50% of the viewport. Each panel scrolls its own senses; the strip no longer takes the height of its tallest child, which is why 22 Candidates currently produce a sheet as tall as the longest of the 22. The 1/4 indicator moves onto the headword row so it stays pinned rather than scrolling out of view on a long Entry, and that row is where a save control and duplicate badge will later sit.

Footer. An empty shell in this slice — the transport lands in #16. It exists now because every region has to be in place for the others to size correctly.

Also in scope: the reading-size control, three steps, bottom-left, persisted, setting one --reading-scale that Cue and Entry both multiply. It hides while the sheet is open.

Design constraints

One family, system-ui plus Noto Sans JP. Fixed rem scale at 1.125. No fluid clamps — the reader views at one DPI.
Restrained colour. Near-black ground, not pure black. One ink, one muted at 4.5:1 or better. The accent has exactly one meaning: the phone is not showing you live. Nothing else gets colour.
The painted Surface Form becomes a low-alpha tint, not the solid block it is today, which fights the glyphs it marks.
Motion 120-150ms, opacity only, never gating content. Nothing the reader waits through.
No decoration that is not carrying information. This is a stated anti-goal, not a preference.

Acceptance criteria

Sheet and Cue can never overlap at any sheet height or Cue length
A long Cue wraps to at most three lines and never clips horizontally
The sheet is capped at 50vh; a 22-Entry set is no taller than a 2-Entry set
The headword row and 1/4 stay pinned while senses scroll; attribution stays pinned at the foot
Reading size has three steps, survives a reload, and scales Cue and Entry together
Body text meets 4.5:1 against its background, and so does the painted Surface Form
Every state renders: sign-in, nothing playing, the picker, loading cues, no subtitle track, image-only track, live, frozen, lookup, no-entry, dictionary building, server silent
Logic worth testing — sizing decisions, the size scale, wrap behaviour — is tested; pure CSS is not faked with a test that restates it

Blocked by

None - can start immediately

## Parent #1 ## What to build The screen becomes four fixed regions — status bar, Cue, sheet, footer — instead of a sheet floating over a strip. Overlap stops being something to cap and becomes something that cannot be expressed. `docs/design-notes.md` records how the overlap arises today. **Status bar, one line, always.** Position, play state, and nothing else. The device name is dropped — it only matters in the picker, where you are choosing between screens, and dropping it is what makes one line possible. `frozen +0:14` gets its own slim strip above the footer when frozen, rather than living up here. **Cue region.** Flexible, shrinks when the sheet opens, Cue re-centres in whatever is left. **The Cue wraps** — up to three lines, centred. Today it clips mid-character at the right edge, which is the bug this fixes. **Sheet region.** Capped at 50% of the viewport. Each panel scrolls its own senses; the strip no longer takes the height of its tallest child, which is why 22 Candidates currently produce a sheet as tall as the longest of the 22. The `1/4` indicator moves onto the headword row so it stays pinned rather than scrolling out of view on a long Entry, and that row is where a save control and duplicate badge will later sit. **Footer.** An empty shell in this slice — the transport lands in #16. It exists now because every region has to be in place for the others to size correctly. Also in scope: the reading-size control, three steps, bottom-left, persisted, setting one `--reading-scale` that Cue and Entry both multiply. It hides while the sheet is open. ## Design constraints - One family, `system-ui` plus Noto Sans JP. Fixed rem scale at 1.125. No fluid clamps — the reader views at one DPI. - Restrained colour. Near-black ground, not pure black. One ink, one muted at 4.5:1 or better. **The accent has exactly one meaning: the phone is not showing you live.** Nothing else gets colour. - The painted Surface Form becomes a low-alpha tint, not the solid block it is today, which fights the glyphs it marks. - Motion 120-150ms, opacity only, never gating content. Nothing the reader waits through. - No decoration that is not carrying information. This is a stated anti-goal, not a preference. ## Acceptance criteria - [ ] Sheet and Cue can never overlap at any sheet height or Cue length - [ ] A long Cue wraps to at most three lines and never clips horizontally - [ ] The sheet is capped at 50vh; a 22-Entry set is no taller than a 2-Entry set - [ ] The headword row and `1/4` stay pinned while senses scroll; attribution stays pinned at the foot - [ ] Reading size has three steps, survives a reload, and scales Cue and Entry together - [ ] Body text meets 4.5:1 against its background, and so does the painted Surface Form - [ ] Every state renders: sign-in, nothing playing, the picker, loading cues, no subtitle track, image-only track, live, frozen, lookup, no-entry, dictionary building, server silent - [ ] Logic worth testing — sizing decisions, the size scale, wrap behaviour — is tested; pure CSS is not faked with a test that restates it ## Blocked by None - can start immediately

aiko added the

ready-for-agent

label

2026-08-10 12:42:38 +00:00

aiko referenced this issue

2026-08-10 12:43:10 +00:00

Per-Cue transport: play, pause, and step a line at a time #16

aiko referenced this issue

2026-08-10 12:43:10 +00:00

Settings: a panel in the sheet, not a screen #17

aiko referenced this issue

2026-08-10 13:13:06 +00:00

Sign-in: port the approved mockup into the app #19

aiko referenced this issue

2026-08-10 14:23:08 +00:00

The strip says frozen when nobody swiped #22

aiko referenced this issue

2026-08-10 14:23:08 +00:00

Put the Cue where the thumb is #23

aiko referenced this issue from a commit

2026-08-10 16:20:44 +00:00

merge: three regions and a footer (#15)

aiko commented

2026-08-10 16:21:24 +00:00

Author

Owner

This was generated by AI during triage.

Merged to main in af73452. Suites at merge: 79 C#, 335 phone.

Four fixed regions in a column, so the sheet covering the Cue became inexpressible rather than capped. The Cue wraps instead of clipping. Reading size is three steps behind one --reading-scale that Cue and Entry both multiply.

It also found two defects nobody had reported: signedIn was hardcoded, making the whole sign-in branch dead, and the form rebuilt on every repaint, taking a password out from under someone typing it.

> *This was generated by AI during triage.* Merged to `main` in af73452. Suites at merge: 79 C#, 335 phone. Four fixed regions in a column, so the sheet covering the Cue became inexpressible rather than capped. The Cue wraps instead of clipping. Reading size is three steps behind one `--reading-scale` that Cue and Entry both multiply. It also found two defects nobody had reported: `signedIn` was hardcoded, making the whole sign-in branch dead, and the form rebuilt on every repaint, taking a password out from under someone typing it.

aiko closed this issue

2026-08-10 16:21:24 +00:00