# ui: Center \`Checkbox\` within its container \(\#9201\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/14a0d8039b9d666ca4f989fc835bc1789b6e3e75)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 14a0d8039b9d666ca4f989fc835bc1789b6e3e75

Requested commit: 14a0d8039b9d666ca4f989fc835bc1789b6e3e75

Commit: 14a0d8039b9d666ca4f989fc835bc1789b6e3e75

Tree: 38ee6d04b0b158f07f2306bfd63b92905c1c3457

Author: Marshall Bowers

Committer: GitHub

## Message

```
ui: Center `Checkbox` within its container (#9201)

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)).
```

## Parents

- [c0b1f74794c2caa3469ff7fa8d09e6dd77c7e9ea](https://git.cafe/gitcafe/zed/commit/c0b1f74794c2caa3469ff7fa8d09e6dd77c7e9ea?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/14a0d8039b9d666ca4f989fc835bc1789b6e3e75?format=markdown)