mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-13 22:32:04 +00:00
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:
1 parent
aba785f9f4
commit
677019b53b
2 files changed
+45
-8
No files matched your search
@@ -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={
|
||||
|
||||
Reference in new issue
Block a user