pane: Fix double or invisible borders in tab bar (#29061)

Smit Barmase created 8 months ago

Invisible borders:
<img width="349" alt="Screenshot 2025-04-18 at 3 59 03 PM"
src="https://github.com/user-attachments/assets/a3a43885-ce87-4fcf-864a-d730fea1551e"
/>
<img width="547" alt="Screenshot 2025-04-18 at 8 23 15 PM"
src="https://github.com/user-attachments/assets/1f8669a8-f893-4c58-ba30-025be1bc733f"
/>

Double borders:
<img width="295" alt="Screenshot 2025-04-18 at 3 56 48 PM"
src="https://github.com/user-attachments/assets/7b4ae42d-c7fd-478c-97ce-10abefe4a482"
/>

Release Notes:

- N/A

Change summary

crates/ui/src/components/tab.rs | 12 +++++++++---
crates/workspace/src/pane.rs    | 12 ++++++------
2 files changed, 15 insertions(+), 9 deletions(-)

Detailed changes

crates/ui/src/components/tab.rs

@@ -122,9 +122,15 @@ impl RenderOnce for Tab {
         };
 
         let (start_slot, end_slot) = {
-            let start_slot = h_flex().size_3().justify_center().children(self.start_slot);
+            let start_slot = h_flex()
+                .size(px(12.)) // use px over rem from size_3
+                .justify_center()
+                .children(self.start_slot);
 
-            let end_slot = h_flex().size_3().justify_center().children(self.end_slot);
+            let end_slot = h_flex()
+                .size(px(12.)) // use px over rem from size_3
+                .justify_center()
+                .children(self.end_slot);
 
             match self.close_side {
                 TabCloseSide::End => (start_slot, end_slot),
@@ -148,7 +154,7 @@ impl RenderOnce for Tab {
                     if self.selected {
                         this.border_l_1().border_r_1().pb_px()
                     } else {
-                        this.pr_px().pl_px().border_b_1().border_r_1()
+                        this.pr_px().border_b_1().border_r_1()
                     }
                 }
                 TabPosition::Middle(Ordering::Equal) => this.border_l_1().border_r_1().pb_px(),

crates/workspace/src/pane.rs

@@ -2661,12 +2661,12 @@ impl Pane {
                     tab_bar
                 }
             })
-            .children(pinned_tabs.len().ne(&0).then(|| {
-                h_flex()
-                    .children(pinned_tabs)
-                    .border_r_2()
-                    .border_color(cx.theme().colors().border)
-            }))
+            .children(
+                pinned_tabs
+                    .len()
+                    .ne(&0)
+                    .then(|| h_flex().children(pinned_tabs)),
+            )
             .child(
                 h_flex()
                     .id("unpinned tabs")