Marshall Bowers created
This PR fixes an issue with the `Checkbox` component where the checkbox
wasn't being centered within its container element.
The problem can be seen when applying a background color to the
container element:
#### Before
<img width="439" alt="Screenshot 2024-03-11 at 5 44 10 PM"
src="https://github.com/zed-industries/zed/assets/1486634/11704b1a-3c3e-4250-99c3-973fb442287a">
#### After
<img width="447" alt="Screenshot 2024-03-11 at 5 45 59 PM"
src="https://github.com/zed-industries/zed/assets/1486634/569a850b-4bd7-4711-8327-bf426fa5d265">
This resulted in issues where, under certain conditions, the checkbox
could get cut off, as seen in #8868.
Centering the checkbox fixes this issue:
<img width="305" alt="Screenshot 2024-03-11 at 5 51 00 PM"
src="https://github.com/zed-industries/zed/assets/1486634/14e5642f-59ad-4288-bc25-ea7da2a008a7">
Fixes #8868.
Release Notes:
- Fixed a positioning issue with checkboxes
([#8868](https://github.com/zed-industries/zed/issues/8868)).crates/ui/src/components/checkbox/checkbox.rs | 2 ++
1 file changed, 2 insertions(+)
@@ -100,6 +100,8 @@ impl RenderOnce for Checkbox {
h_flex()
.id(self.id)
+ .justify_center()
+ .items_center()
// Rather than adding `px_1()` to add some space around the checkbox,
// we use a larger parent element to create a slightly larger
// click area for the checkbox.