fix(web): History's head row overflows the viewport on phones — .section-head has no flex-wrap #285

New issue

Open

opened 2026-08-04 20:20:19 +02:00 by dominik.polakovics · 0 comments

dominik.polakovics commented

2026-08-04 20:20:19 +02:00

Owner

What happens

.section-head (shell.css) is a flex row with no flex-wrap, unlike its card-level counterpart .card-head (cards.css), which has flex-wrap: wrap. History's head row is the only one that carries two controls: two <label class="field runs-filter"> selects, each pinned to min-width: 180px (runs.css).

At a 390px viewport the page content box is 366px, and h2 + 180 + 180 + gaps cannot fit. The <h2> shrinks to its min-content column (~14px — overflow-wrap: anywhere) and the row still overflows, so the History page scrolls horizontally.

Measured (chromium, 390×844, real Source Serif 4, `.page` at its production width)

	row's right edge	page right edge	overflow	`document.scrollWidth`
before #280	406.63	378.00	28.63px	407 (vs clientWidth 390)
after #280	417.02	378.00	39.02px	417 (vs clientWidth 390)

The extra 10.39px is exactly one .section-head gap (0.65rem): SectionHead always renders the .spacer that does the right-aligning, so the row has two gaps (h2 | spacer | action) where the old justify-content: space-between markup had one. Everywhere else that is invisible — the spacer just absorbs 0.65rem less free space, and every other page head measured a 0.00px delta on height, edges and the gap below the row. It only shows up on the one row that has no free space to give.

The <h2> is squeezed to the same width in both revisions, so this is not a heading-metrics problem: it is two 180px min-widths in a row that cannot wrap.

Suggested fix

Give .section-head the flex-wrap: wrap its card-level twin already has, so the controls drop to their own line instead of pushing the page sideways. Worth deciding at the same time whether the filters should go full-width on a phone (this is a phone-first app; two 180px selects side by side are cramped even when they do fit).

Deliberately not done inside #280: that issue's brief puts "any spacing/visual redesign" out of scope, and wrapping visibly changes History's phone layout — a call for a maintainer, not for the refactor that happened to measure it.

Found while measuring #280 (head-row unification) in headless chromium. Pre-existing, not caused by #280 — but #280 makes it ~10px worse, so recording it with numbers rather than letting it disappear. ## What happens `.section-head` (shell.css) is a flex row with **no `flex-wrap`**, unlike its card-level counterpart `.card-head` (cards.css), which has `flex-wrap: wrap`. History's head row is the only one that carries two controls: two `<label class="field runs-filter">` selects, each pinned to `min-width: 180px` (runs.css). At a 390px viewport the page content box is 366px, and `h2` + 180 + 180 + gaps cannot fit. The `<h2>` shrinks to its min-content column (~14px — `overflow-wrap: anywhere`) and the row still overflows, so the History page scrolls horizontally. ## Measured (chromium, 390×844, real Source Serif 4, `.page` at its production width) | | row's right edge | page right edge | overflow | `document.scrollWidth` | | --- | --- | --- | --- | --- | | before #280 | 406.63 | 378.00 | 28.63px | 407 (vs clientWidth 390) | | after #280 | 417.02 | 378.00 | 39.02px | 417 (vs clientWidth 390) | The extra 10.39px is exactly one `.section-head` `gap` (0.65rem): `SectionHead` always renders the `.spacer` that does the right-aligning, so the row has two gaps (`h2 | spacer | action`) where the old `justify-content: space-between` markup had one. Everywhere else that is invisible — the spacer just absorbs 0.65rem less free space, and every other page head measured a 0.00px delta on height, edges and the gap below the row. It only shows up on the one row that has no free space to give. The `<h2>` is squeezed to the same width in both revisions, so this is not a heading-metrics problem: it is two 180px min-widths in a row that cannot wrap. ## Suggested fix Give `.section-head` the `flex-wrap: wrap` its card-level twin already has, so the controls drop to their own line instead of pushing the page sideways. Worth deciding at the same time whether the filters should go full-width on a phone (this is a phone-first app; two 180px selects side by side are cramped even when they do fit). Deliberately **not** done inside #280: that issue's brief puts "any spacing/visual redesign" out of scope, and wrapping visibly changes History's phone layout — a call for a maintainer, not for the refactor that happened to measure it.

dominik.polakovics added the

needs-triage

label

2026-08-04 20:20:19 +02:00

dominik.polakovics referenced this issue from a commit

2026-08-04 20:20:58 +02:00

refactor(web): one shared head row per kind — extract SectionHead, fold the rest into SectionCard

dominik.polakovics referenced this issue

2026-08-04 20:21:19 +02:00

refactor(web): one shared head row per kind — extract SectionHead, fold the rest into SectionCard #286

dominik.polakovics referenced this issue

2026-08-04 20:33:50 +02:00