Make close tab and pin tab buttons slightly larger for better usability (#34428)

Daniel Sauble and Danilo Leal created 3 months ago

Closes #6817

Increases the size of tab buttons from 16px to 18px so they're easier to
click.

For comparison, tab buttons in VSCode have a click target size of 20px,
so we're still a bit smaller than that.

Before:

<img width="261" height="33" alt="before_tab_buttons"
src="https://github.com/user-attachments/assets/7a43f8e1-da84-4981-b2c8-ca77f12ef279"
/>

After:

<img width="265" height="33" alt="after_tab_buttons"
src="https://github.com/user-attachments/assets/c64a98dd-c6bc-480b-be10-f7fa467074c4"
/>

VSCode (for comparison):

<img width="242" height="34" alt="Screenshot 2025-07-14 at 1 43 03 PM"
src="https://github.com/user-attachments/assets/2fafeb2f-75e6-45d1-83da-8601c22474bd"
/>

Release Notes:

- Improve usability of close tab and pin tab buttons by making them
slightly larger

---------

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

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

Detailed changes

crates/ui/src/components/tab.rs

@@ -5,6 +5,9 @@ use smallvec::SmallVec;
 
 use crate::prelude::*;
 
+const START_TAB_SLOT_SIZE: Pixels = px(12.);
+const END_TAB_SLOT_SIZE: Pixels = px(14.);
+
 /// The position of a [`Tab`] within a list of tabs.
 #[derive(Debug, PartialEq, Eq, Clone, Copy)]
 pub enum TabPosition {
@@ -123,12 +126,12 @@ impl RenderOnce for Tab {
 
         let (start_slot, end_slot) = {
             let start_slot = h_flex()
-                .size(px(12.)) // use px over rem from size_3
+                .size(START_TAB_SLOT_SIZE)
                 .justify_center()
                 .children(self.start_slot);
 
             let end_slot = h_flex()
-                .size(px(12.)) // use px over rem from size_3
+                .size(END_TAB_SLOT_SIZE)
                 .justify_center()
                 .children(self.end_slot);
 

crates/workspace/src/pane.rs

@@ -2519,7 +2519,7 @@ impl Pane {
                         .shape(IconButtonShape::Square)
                         .icon_color(Color::Muted)
                         .size(ButtonSize::None)
-                        .icon_size(IconSize::XSmall)
+                        .icon_size(IconSize::Small)
                         .on_click(cx.listener(move |pane, _, window, cx| {
                             pane.unpin_tab_at(ix, window, cx);
                         }))
@@ -2539,7 +2539,7 @@ impl Pane {
                     .shape(IconButtonShape::Square)
                     .icon_color(Color::Muted)
                     .size(ButtonSize::None)
-                    .icon_size(IconSize::XSmall)
+                    .icon_size(IconSize::Small)
                     .on_click(cx.listener(move |pane, _, window, cx| {
                         pane.close_item_by_id(item_id, SaveIntent::Close, window, cx)
                             .detach_and_log_err(cx);