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 ade3abe63e741ac42b35a4cc37526d268b08ddbe..06bf5a1843772b0d5007c20fe52dd3ca008846b2 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),
             )
     }
 }