fix(web): small-screen defects found by a measured audit #239

Merged

grenade merged 1 commits from fix/small-screen-audit into main 2026-08-06 10:05:47 +00:00

Conversation 0 Commits 1 Files Changed 4 +36 -4

grenade commented 2026-08-06 10:05:40 +00:00

Owner

Copy Link

Drove the built app through headless Chrome at 320/360/390/414/768/992/1200px across every public route, and in Arabic, Hebrew and German, measuring horizontal overflow and tap-target geometry rather than eyeballing screenshots. Four real defects; all verified fixed by re-running the same sweep — 42 route/width combinations, no horizontal overflow.

Long URLs made the conversation pan sideways. Any message containing an unbreakable token pushed the thread ~200px horizontally at 360px, in both bubble types. overflow-wrap: anywhere rather than break-word: only anywhere counts toward the min-content width, and min-content width was what sized the scroll area, so break-word would have wrapped the text and left the panning intact. 187px → 0.

/mission slid sideways 8–12px at every width below the container's max-width. A row's horizontal gutter becomes a negative side margin of half its width, and .container only cancels that up to g-4 — the page's other rows already use g-4, which is why only the two g-5 rows leaked. Restricting the wide gutter to large screens still failed at exactly 992px, because a scrollbar narrows the viewport below what the breakpoint assumes, so the horizontal gutter goes entirely; the columns stack below lg and the vertical gutter does the visible work.

The document advertised lang="en" while rendering Arabic. Direction was already synced on language change; the language itself was not — which is what a screen reader announces from, and what the browser selects a font and hyphenation dictionary with.

Sub-24px tap targets on the footer links (21px) and the standalone password-reset link (19px), at the bottom edge of a phone where tapping is least accurate. The one remaining sub-24px link is a mailto inline in a sentence, which the guideline exempts.

Checked and found already correct, so left alone: the chat sidebar's mobile drawer (the rail rules look like they would override the drawer width, but the max-width: 767.98px block at App.css:1685 handles exactly that), and code-block/table containment (both scroll internally; the page never moves).

Drove the built app through headless Chrome at 320/360/390/414/768/992/1200px across every public route, and in Arabic, Hebrew and German, measuring horizontal overflow and tap-target geometry rather than eyeballing screenshots. Four real defects; all verified fixed by re-running the same sweep — 42 route/width combinations, no horizontal overflow. **Long URLs made the conversation pan sideways.** Any message containing an unbreakable token pushed the thread ~200px horizontally at 360px, in both bubble types. `overflow-wrap: anywhere` rather than `break-word`: only `anywhere` counts toward the min-content width, and min-content width was what sized the scroll area, so `break-word` would have wrapped the text and left the panning intact. 187px → 0. **`/mission` slid sideways 8–12px at every width** below the container's max-width. A row's horizontal gutter becomes a negative side margin of half its width, and `.container` only cancels that up to `g-4` — the page's other rows already use `g-4`, which is why only the two `g-5` rows leaked. Restricting the wide gutter to large screens still failed at exactly 992px, because a scrollbar narrows the viewport below what the breakpoint assumes, so the horizontal gutter goes entirely; the columns stack below `lg` and the vertical gutter does the visible work. **The document advertised `lang="en"` while rendering Arabic.** Direction was already synced on language change; the language itself was not — which is what a screen reader announces from, and what the browser selects a font and hyphenation dictionary with. **Sub-24px tap targets** on the footer links (21px) and the standalone password-reset link (19px), at the bottom edge of a phone where tapping is least accurate. The one remaining sub-24px link is a mailto inline in a sentence, which the guideline exempts. Checked and found already correct, so left alone: the chat sidebar's mobile drawer (the rail rules look like they would override the drawer width, but the `max-width: 767.98px` block at App.css:1685 handles exactly that), and code-block/table containment (both scroll internally; the page never moves).

grenade added 1 commit 2026-08-06 10:05:41 +00:00

fix(web): small-screen defects found by a measured audit ... 5ff5ee4b88

Driving the built app through headless Chrome at 320/360/390/414/768/
992/1200px across every public route, and in Arabic, Hebrew and German,
turned up four real defects. All four are verified fixed by re-running
the same sweep: 42 route/width combinations, no horizontal overflow.

A long URL or identifier in a chat message made the conversation pan
sideways ~200px on a phone. `overflow-wrap: anywhere` on the bubble, not
`break-word`, because only `anywhere` counts toward the min-content
width — and it was the min-content width driving the scroll area, so
`break-word` would have wrapped the text and left the panning intact.

The mission page slid sideways 8-12px at every width below the
container's max-width. A row's horizontal gutter becomes a negative side
margin of half its width and the container only cancels that up to
`g-4`; the two `g-5` rows there poked 12px past the viewport. Restricting
the wide gutter to large screens still failed at exactly 992px, because
a scrollbar narrows the viewport below what the breakpoint assumes, so
the horizontal gutter goes entirely — the columns stack below lg and the
vertical gutter is what does the visible work.

The document advertised `lang="en"` while rendering Arabic. Direction was
already synced on language change; the language itself was not, which is
what a screen reader announces from and what the browser selects a font
and hyphenation dictionary with.

Footer links and the password-reset link were 19-22px tall, under the
24px minimum, and sit at the bottom edge of a phone where tapping is
least accurate. The remaining sub-24px link is a mailto inline in a
sentence, which the guideline exempts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0165r11RzqkMqWWXfJE8tAVU

grenade merged commit 5db62a15bc into main 2026-08-06 10:05:47 +00:00

grenade deleted branch fix/small-screen-audit 2026-08-06 10:05:48 +00:00

grenade referenced this issue from a commit 2026-08-06 10:05:48 +00:00

Merge pull request 'fix(web): small-screen defects found by a measured audit' (#239) from fix/small-screen-audit into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

out-of-scope

Outside helexa's constraining principles: near-frontier models on consumer hardware, served transparently and predictably

p1-now

Active pain or unblocking work — pick up first

p2-next

Engine levers — start once P1 baselines exist

p3-later

Dependent on earlier work, or demand-driven

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

grenade

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: helexa/helexa#239