From 14a0d8039b9d666ca4f989fc835bc1789b6e3e75 Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Mon, 11 Mar 2024 18:08:31 -0400
Subject: [PATCH] ui: Center `Checkbox` within its container (#9201)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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(+)

diff --git a/crates/ui/src/components/checkbox/checkbox.rs b/crates/ui/src/components/checkbox/checkbox.rs
index d0750f7389..a04a0a4a90 100644
--- a/crates/ui/src/components/checkbox/checkbox.rs
+++ b/crates/ui/src/components/checkbox/checkbox.rs
@@ -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.