From 5e635b89140f03e8b634294a6a8f2b400f3d7463 Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Fri, 19 Jul 2024 15:11:27 -0400
Subject: [PATCH] ui: Remove absolute positioning for tab slots (#14836)

This PR reworks the `Tab` component to not use absolute positioning in
order to position the tab slots.

This should make any further adjustments we want to make to the spacing
easier to do.

Release Notes:

- N/A
---
 crates/ui/src/components/tab.rs | 46 ++++++++++++++-------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/crates/ui/src/components/tab.rs b/crates/ui/src/components/tab.rs
index ade3abe63e..06bf5a1843 100644
--- a/crates/ui/src/components/tab.rs
+++ b/crates/ui/src/components/tab.rs
@@ -117,6 +117,21 @@ impl RenderOnce for Tab {
             ),
         };
 
+        let (start_slot, end_slot) = {
+            let start_slot = h_flex().size_3().justify_center().children(self.start_slot);
+
+            let end_slot = h_flex()
+                .size_3()
+                .justify_center()
+                .visible_on_hover("")
+                .children(self.end_slot);
+
+            match self.close_side {
+                TabCloseSide::End => (start_slot, end_slot),
+                TabCloseSide::Start => (end_slot, start_slot),
+            }
+        };
+
         self.div
             .h(rems(Self::CONTAINER_HEIGHT_IN_REMS))
             .bg(tab_bg)
@@ -146,35 +161,12 @@ impl RenderOnce for Tab {
                     .group("")
                     .relative()
                     .h(rems(Self::CONTENT_HEIGHT_IN_REMS))
-                    .px(crate::custom_spacing(cx, 20.))
+                    .px(crate::custom_spacing(cx, 4.))
                     .gap(Spacing::Small.rems(cx))
                     .text_color(text_color)
-                    // .hover(|style| style.bg(tab_hover_bg))
-                    // .active(|style| style.bg(tab_active_bg))
-                    .child(
-                        h_flex()
-                            .size_3()
-                            .justify_center()
-                            .absolute()
-                            .map(|this| match self.close_side {
-                                TabCloseSide::Start => this.right(Spacing::Small.rems(cx)),
-                                TabCloseSide::End => this.left(Spacing::Small.rems(cx)),
-                            })
-                            .children(self.start_slot),
-                    )
-                    .child(
-                        h_flex()
-                            .size_3()
-                            .justify_center()
-                            .absolute()
-                            .map(|this| match self.close_side {
-                                TabCloseSide::Start => this.left(Spacing::Small.rems(cx)),
-                                TabCloseSide::End => this.right(Spacing::Small.rems(cx)),
-                            })
-                            .visible_on_hover("")
-                            .children(self.end_slot),
-                    )
-                    .children(self.children),
+                    .child(start_slot)
+                    .children(self.children)
+                    .child(end_slot),
             )
     }
 }