fix(onboarding): let the confirm screen's sex select shrink at 390 px

The string-headroom sweep went red on CI for French at phone width by
two pixels the Mac never showed: the runner's fallback fonts render a
touch wider. The box was the sex select on the confirm screen — its
value is whitespace-nowrap, and a grid item's automatic minimum is its
min-content, so the track was pinned at the padded option's width and
the shell scrolled sideways. Both cells of that row and the trigger
carry min-w-0 now: the track takes the free space and the value
ellipsises, which is the select primitive's own design. Reproduced and
verified locally by narrowing the viewport to 372 px, which stands in
for the wider fonts (336 px of scroll before, none after).

The sweep now names what overflowed: the boxes past the shell's edge,
with tag, slot, classes, text prefix and edges, ride the failure
message and the outside list, so the next red run says what rather
than only that.
This commit is contained in:
Marc-André Bombeck committed 2026-09-10 23:50:30 +02:00
1 parent aba785f9f4
commit 677019b53b
2 files changed
+45 -8

No files matched your search

+10 -1
View File
@@ -95,8 +95,16 @@ export function BaselineFields({
/>
</FieldGroup>
{/* `min-w-0` on both cells: a grid item's automatic minimum is its
min-content, and the sex select's value is `whitespace-nowrap` — a
locale whose longest option is a third longer, or a runner whose
fallback fonts render two pixels wider, then pinned the track past
the card at 390 px (the string-headroom sweep caught it on CI). With
the minimum released the track takes the free space and the value
ellipsises, which is the select primitive's own design. */}
<div className="grid gap-4 sm:grid-cols-2">
<FieldGroup
className="min-w-0"
htmlFor={IDS.heightCm}
label={
heightAdapter.usesFeetInches
@@ -116,6 +124,7 @@ export function BaselineFields({
/>
</FieldGroup>
<FieldGroup
className="min-w-0"
htmlFor={IDS.gender}
label={t("onboarding.baseline.genderLabel")}
error={errors.gender}
@@ -130,7 +139,7 @@ export function BaselineFields({
>
<SelectTrigger
id={IDS.gender}
className="w-full"
className="w-full min-w-0"
data-slot="onboarding-baseline-gender"
aria-invalid={errors.gender ? true : undefined}
aria-describedby={