CheckboxButton centers its label and content when it is wider than its text
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 76/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- react, typescript
Research direction
Start at the CheckboxButton input styles, especially .flow--checkbox-button--input:has(.flow--checkbox-button--content), and compare them with the RadioButton grid styles. Reproduce the supplied CheckboxGroup example at a wider card width and verify that the label and content remain left-aligned beside the icon. Also review the related CheckboxGroup and RadioGroup card-stretch behavior if that part is included in scope.
Written by the indexing model from the issue text.
Description
Version: @mittwald/flow-react-components / flow-remote-react-components 1.1.48
What happens
A CheckboxButton with Text and Content renders its input as a grid with grid-template-areas: "icon label" ". content", but without grid-template-columns. When the button is wider than its text, for example in a CheckboxGroup with l={[1]}, the free space goes to both implicit columns. The icon column grows and label and content drift to the middle of the card.
RadioButton does not have this problem: .flow--radio-group--radio-button sets grid-template-columns: auto 1fr.
Repro
<CheckboxGroup l={[1]} m={[1]} s={[1]}>
<Label>Features</Label>
<CheckboxButton value="a">
<Text>Image builds</Text>
<Content>Builds and pushes images.</Content>
</CheckboxButton>
</CheckboxGroup>
Expected
Label and content stay left-aligned next to the icon, like RadioButton. Adding grid-template-columns: auto 1fr to .flow--checkbox-button .flow--checkbox-button--input:has(.flow--checkbox-button--content) would fix it.
Related
In a multi-column group the cards keep their own height (ColumnLayout uses align-items: start), so cards with shorter text end up shorter than their neighbors. RadioButton in a RadioGroup has the same layout. Stretching the cards (align-self: stretch) inside CheckboxGroup and RadioGroup would give a row of equal cards.
- Dominant language
- TypeScript
- Stars
- 15
- Forks
- 4
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 140
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mittwald/flow
-
bug component
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
docs(agents): state which release line a change belongs to next to the migration catalogue ruleOpen
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
documentation
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
mittwald/flow#3205 · 1 comment ·
Maintainers usually reply within 1 day
-
feedback to-discuss ux
Difficulty 5/5 Over a week Newbie friendliness 25/100
Maintainers usually reply within 1 day
-
feedback to-discuss ux
Difficulty 5/5 Over a week Newbie friendliness 25/100
Maintainers usually reply within 1 day
Similar issues
-
area:cli bug P4
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
bug from-studio
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
esengine/DeepSeek-Reasonix#14868 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
linxiv-dev/linXiv#384 · 1 comment ·
Maintainers usually reply within 1 day
-
scope:core type:security
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
mailgun/mailgun.js#544 ·