Skip to content

ui: wrap long side labels instead of pushing the control off the row #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
microbit-matt-hillsdon merged 1 commit into from
Aug 14, 2026
Merged

ui: wrap long side labels instead of pushing the control off the row #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/ui/src/Field.recipe.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,11 @@ export const field = defineSlotRecipe({
// their own line below the label/control pair.
flexWrap: "wrap",
},
label: { mb: "0", flex: "1 1 auto" },
// Basis 0, not auto: the wrap container breaks lines on hypothetical
// sizes, and an auto basis is the label's max-content — a long
// translated label would push the control onto its own line instead
// of wrapping its text beside it.
label: { mb: "0", flex: "1 1 0" },
helperText: { width: "100%" },
errorMessage: { width: "100%" },
},
Expand Down
10 changes: 10 additions & 0 deletions packages/ui/stories/FieldChrome.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,16 @@ export const SideLabels: Story = {
>
{options}
</Select>
{/* Translation-length label: must wrap beside the control, not push
it onto its own line (the label's flex basis is 0 for this). */}
<Select
label="Highlight code structure when the translation runs long"
labelPosition="side"
defaultSelectedKey="Apple"
triggerCss={{ width: "28ch" }}
>
{options}
</Select>
<ComboBox
label="Preferred fruit"
labelPosition="side"
Expand Down