From 91474e247f188a761a4f1adba9fead7f1b54cb96 Mon Sep 17 00:00:00 2001
From: Daniel Sauble <djsauble@gmail.com>
Date: Fri, 8 Aug 2025 14:04:32 -0700
Subject: [PATCH] Make close tab and pin tab buttons slightly larger for better
 usability (#34428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <daniloleal09@gmail.com>
---
 crates/ui/src/components/tab.rs | 7 +++++--
 crates/workspace/src/pane.rs    | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/crates/ui/src/components/tab.rs b/crates/ui/src/components/tab.rs
index d704846a68..e6823f46b7 100644
--- a/crates/ui/src/components/tab.rs
+++ b/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);
 
diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs
index a9e7304e47..0c35752165 100644
--- a/crates/workspace/src/pane.rs
+++ b/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);