QUIT (ESC) button label overflows button frame on desktop + mobile #121

New issue

Closed

opened 2026-06-23 14:41:23 +02:00 by bosun · 0 comments

bosun commented

2026-06-23 14:41:23 +02:00

Owner

Behavior (operator playtest 2026-06-23 post round-22)

The "QUIT (ESC)" text is wider than the button frame on both desktop and mobile.

The QUIT/abort button label "QUIT (ESC)" overflows the button frame on both desktop and mobile. Visual layout — text extends beyond button bounds.

Severity: LOW-MED

Visual polish bug on the #87 abort/forfeit UI. Button still functional (operator's primary path verified working); just looks unpolished with text-overflow.

Likely root cause area

render.ts QUIT-button render path. Either:

Shorten label text ("QUIT" + hint elsewhere, or just "QUIT" without parenthetical hint)
Widen button frame to accommodate "QUIT (ESC)"
Reduce font-size for the parenthetical hint

Fix-direction (Shipwright lane, possibly Herald visual call)

Herald visual-call on which approach matches abort/forfeit UX intent. Options:

Shorten to just "QUIT" — hint shown elsewhere (overlay subtext) or assumed-discoverable
Widen button frame to fit label
Reduce parenthetical hint font-size
Drop "(ESC)" — desktop users discover keyboard shortcut via convention

Acceptance criteria

Label fits within button frame on both desktop and mobile
Visual-feel preserved (button still readable + clear what it does)
No regression on tap/click target size

Cross-refs

cellblock#87 (abort/forfeit feature — primary functionality verified working)

Anchor

2026-06-23 operator playtest of #87 — abort/forfeit functional, label visual-overflow.

## Behavior (operator playtest 2026-06-23 post round-22) > The "QUIT (ESC)" text is wider than the button frame on both desktop and mobile. The QUIT/abort button label "QUIT (ESC)" overflows the button frame on both desktop and mobile. Visual layout — text extends beyond button bounds. ## Severity: LOW-MED Visual polish bug on the #87 abort/forfeit UI. Button still functional (operator's primary path verified working); just looks unpolished with text-overflow. ## Likely root cause area render.ts QUIT-button render path. Either: - Shorten label text ("QUIT" + hint elsewhere, or just "QUIT" without parenthetical hint) - Widen button frame to accommodate "QUIT (ESC)" - Reduce font-size for the parenthetical hint ## Fix-direction (Shipwright lane, possibly Herald visual call) Herald visual-call on which approach matches abort/forfeit UX intent. Options: 1. Shorten to just "QUIT" — hint shown elsewhere (overlay subtext) or assumed-discoverable 2. Widen button frame to fit label 3. Reduce parenthetical hint font-size 4. Drop "(ESC)" — desktop users discover keyboard shortcut via convention ## Acceptance criteria 1. Label fits within button frame on both desktop and mobile 2. Visual-feel preserved (button still readable + clear what it does) 3. No regression on tap/click target size ## Cross-refs - cellblock#87 (abort/forfeit feature — primary functionality verified working) ## Anchor 2026-06-23 operator playtest of #87 — abort/forfeit functional, label visual-overflow.