Fix unaligned close button in tab bar (#4054)

Thorsten Ball created 2 years ago

This fixes the close button not being vertically aligned in the tab bar.


## Before
![screenshot-2024-01-15-18 13
49@2x](https://github.com/zed-industries/zed/assets/1185253/edf81b4d-a93a-461a-9835-4aba025cf337)

## After
![screenshot-2024-01-15-18 14
45@2x](https://github.com/zed-industries/zed/assets/1185253/2ae24c8c-9df3-4248-8566-fee6ce8602e0)


---

Release Notes:

- Fixed close-tab button not being vertically aligned in the tab bar.

Change summary

crates/assistant/src/assistant_panel.rs    | 2 +-
crates/collab_ui/src/chat_panel.rs         | 2 +-
crates/collab_ui/src/notification_panel.rs | 2 +-
crates/ui/src/components/tab.rs            | 8 +++++---
crates/ui/src/components/tab_bar.rs        | 2 +-
5 files changed, 9 insertions(+), 7 deletions(-)

Detailed changes

crates/assistant/src/assistant_panel.rs

@@ -1119,7 +1119,7 @@ impl Render for AssistantPanel {
                 )
                 .children(self.active_editor().map(|editor| {
                     h_flex()
-                        .h(rems(Tab::HEIGHT_IN_REMS))
+                        .h(rems(Tab::CONTAINER_HEIGHT_IN_REMS))
                         .flex_1()
                         .px_2()
                         .child(Label::new(editor.read(cx).title(cx)).into_element())

crates/collab_ui/src/chat_panel.rs

@@ -523,7 +523,7 @@ impl Render for ChatPanel {
                     TabBar::new("chat_header").child(
                         h_flex()
                             .w_full()
-                            .h(rems(ui::Tab::HEIGHT_IN_REMS))
+                            .h(rems(ui::Tab::CONTAINER_HEIGHT_IN_REMS))
                             .px_2()
                             .child(Label::new(
                                 self.active_chat

crates/collab_ui/src/notification_panel.rs

@@ -549,7 +549,7 @@ impl Render for NotificationPanel {
                     .px_2()
                     .py_1()
                     // Match the height of the tab bar so they line up.
-                    .h(rems(ui::Tab::HEIGHT_IN_REMS))
+                    .h(rems(ui::Tab::CONTAINER_HEIGHT_IN_REMS))
                     .border_b_1()
                     .border_color(cx.theme().colors().border)
                     .child(Label::new("Notifications"))

crates/ui/src/components/tab.rs

@@ -48,7 +48,9 @@ impl Tab {
         }
     }
 
-    pub const HEIGHT_IN_REMS: f32 = 30. / 16.;
+    pub const CONTAINER_HEIGHT_IN_REMS: f32 = 29. / 16.;
+
+    const CONTENT_HEIGHT_IN_REMS: f32 = 28. / 16.;
 
     pub fn position(mut self, position: TabPosition) -> Self {
         self.position = position;
@@ -111,7 +113,7 @@ impl RenderOnce for Tab {
         };
 
         self.div
-            .h(rems(Self::HEIGHT_IN_REMS))
+            .h(rems(Self::CONTAINER_HEIGHT_IN_REMS))
             .bg(tab_bg)
             .border_color(cx.theme().colors().border)
             .map(|this| match self.position {
@@ -138,7 +140,7 @@ impl RenderOnce for Tab {
                 h_flex()
                     .group("")
                     .relative()
-                    .h_full()
+                    .h(rems(Self::CONTENT_HEIGHT_IN_REMS))
                     .px_5()
                     .gap_1()
                     .text_color(text_color)

crates/ui/src/components/tab_bar.rs

@@ -90,7 +90,7 @@ impl ParentElement for TabBar {
 
 impl RenderOnce for TabBar {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        const HEIGHT_IN_REMS: f32 = 30. / 16.;
+        const HEIGHT_IN_REMS: f32 = 29. / 16.;
 
         div()
             .id(self.id)