From 24ffb9f16e7cade972f239ccdf655fff122c5d68 Mon Sep 17 00:00:00 2001
From: LU XIANGRUI <1078666705@qq.com>
Date: Sat, 7 Nov 2026 12:13:00 +0900
Subject: [PATCH] fix(workbench): even out the tool window stripes' spacing and
 draw their icons at 20px (#1741)

Stripe icon buttons were 28px with a 2px gap, plus an extra gap at each group boundary, and their 20px icons were drawn at 18px, off the pixel grid. Stripe buttons are now 30px and repeat at the title bar's height (40px, 32px compact), so the title bar's Settings button reads as the right stripe's first one; the empty drop slot after a group no longer adds a gap. Stripe, title bar and Run widget icons render at 20px.

Co-authored-by: wildcatDownstairs <26499420+wildcatDownstairs@users.noreply.github.com>
---
 src/features/run/RunWidget.tsx                |  8 +++----
 src/styles/tokens.css                         |  2 +-
 src/workbench/TitleBar.tsx                    |  4 ++--
 .../toolwindows/ToolWindows.module.css        | 21 ++++++++++++++-----
 src/workbench/toolwindows/ToolWindows.tsx     |  8 +++----
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/features/run/RunWidget.tsx b/src/features/run/RunWidget.tsx
index 7fb7bb621..83e4fe1e1 100644
--- a/src/features/run/RunWidget.tsx
+++ b/src/features/run/RunWidget.tsx
@@ -90,7 +90,7 @@ export function RunWidget() {
               <IconButton
                 icon="resume"
                 size="large"
-                iconSize={18}
+                iconSize={20}
                 className={styles.widgetButton}
                 title="Resume Program"
                 shortcut={shortcutLabel("debug.resume")}
@@ -113,7 +113,7 @@ export function RunWidget() {
             <IconButton
               icon="run"
               size="large"
-              iconSize={18}
+              iconSize={20}
               className={clsx(styles.widgetButton, styles.widgetRun)}
               title={
                 selected
@@ -131,7 +131,7 @@ export function RunWidget() {
             <IconButton
               icon="debug"
               size="large"
-              iconSize={18}
+              iconSize={20}
               className={styles.widgetButton}
               title={selected ? tx`Debug '${selected.name}'` : currentFile ? "Debug Current File" : "Debug"}
               shortcut={shortcutLabel("run.debug")}
@@ -168,7 +168,7 @@ export function RunWidget() {
           ref={moreRef}
           icon="more"
           size="large"
-          iconSize={18}
+          iconSize={20}
           className={styles.widgetButton}
           title="More Actions"
           aria-haspopup="menu"
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index fb94e75d9..1476e486b 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -253,7 +253,7 @@ html {
   --h-titlebar: 40px;
   --titlebar-tool-button: 30px;
   /* tool window stripe button, icons only */
-  --stripe-icon-button: 28px;
+  --stripe-icon-button: 30px;
   --stripe-outer-padding: 4px;
   --h-header: 40px;
   --h-tabbar: 38px;
diff --git a/src/workbench/TitleBar.tsx b/src/workbench/TitleBar.tsx
index daf68e7d4..806068a97 100644
--- a/src/workbench/TitleBar.tsx
+++ b/src/workbench/TitleBar.tsx
@@ -235,7 +235,7 @@ function GearButton({ customize }: { customize: MenuItem[] }) {
         ref={ref}
         icon="settings"
         title="IDE and Project Settings"
-        iconSize={18}
+        iconSize={20}
         className={styles.tool}
         aria-haspopup="menu"
         aria-expanded={open}
@@ -263,7 +263,7 @@ function ToolbarEntry({ id, items }: { id: string; items: ReadonlyMap<string, Ti
         action={action.id}
         title={action.title}
         shortcut={shortcutLabel(action.id) ?? (action.id === "navigate.searchEverywhere" ? "⇧⇧" : undefined)}
-        iconSize={18}
+        iconSize={20}
         className={styles.tool}
       />
     </div>
diff --git a/src/workbench/toolwindows/ToolWindows.module.css b/src/workbench/toolwindows/ToolWindows.module.css
index 7d0f22c7d..c033e8978 100644
--- a/src/workbench/toolwindows/ToolWindows.module.css
+++ b/src/workbench/toolwindows/ToolWindows.module.css
@@ -168,8 +168,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 0 0 6px;
+  /* Icon buttons repeat at the title bar's height, so the title bar's Settings button reads as the right stripe's first one, as in IDEA. */
+  --stripe-gap: calc(var(--h-titlebar) - var(--stripe-icon-button));
+  gap: var(--stripe-gap);
+  padding: calc(var(--stripe-gap) / 2) 0 6px;
   /* Transparent: stripes sit on the window frame so the project-colour wash flows from the title bar. */
   background: transparent;
   /* Short windows: scroll the buttons instead of clipping the last ones. */
@@ -182,7 +184,8 @@
 }
 .stripeWithNames {
   --stripe-button: var(--stripe-drag, var(--stripe-button-w, 56px));
-  gap: 4px;
+  --stripe-gap: 4px;
+  padding-top: 0;
 }
 .stripeSideLeft {
   padding-left: var(--stripe-pad);
@@ -256,7 +259,7 @@
   padding: 6px 2px 5px;
 }
 .stripeMore {
-  height: 30px;
+  height: var(--stripe-icon-button);
 }
 .stripeWithNames .stripeMore {
   width: var(--stripe-button);
@@ -426,9 +429,17 @@
   display: flex;
   flex-direction: column;
 }
+/* The drop target after a group's last button is empty: don't let it add a gap between groups. */
+.stripeSlotEnd {
+  margin-top: calc(-1 * var(--stripe-gap));
+}
+.stripeSlotEnd .stripeDrop {
+  top: calc(var(--stripe-gap) / 2 - 1px);
+}
 .stripeDrop {
   position: absolute;
-  top: -3px;
+  /* Centred in the gap above the slot; the end slot sits on the last button's bottom edge, so below it. */
+  top: calc(var(--stripe-gap) / -2 - 1px);
   left: 6px;
   right: 6px;
   height: 2px;
diff --git a/src/workbench/toolwindows/ToolWindows.tsx b/src/workbench/toolwindows/ToolWindows.tsx
index 1294504b7..7d8e9842c 100644
--- a/src/workbench/toolwindows/ToolWindows.tsx
+++ b/src/workbench/toolwindows/ToolWindows.tsx
@@ -218,7 +218,7 @@ function StripeHandle({
     const el = e.currentTarget;
     el.setPointerCapture(e.pointerId);
     const origin = e.clientX;
-    const icons = parseFloat(getComputedStyle(stripe).getPropertyValue("--stripe-icon-button")) || 28;
+    const icons = parseFloat(getComputedStyle(stripe).getPropertyValue("--stripe-icon-button")) || 30;
     const start = names ? width : icons;
     const cursor = document.body.style.cursor;
     document.body.style.cursor = "col-resize";
@@ -418,7 +418,7 @@ function StripeButton({
       {...tooltipAttrs(tw.title, shortcut)}
     >
       <span className={styles.stripeIcon}>
-        <Icon name={tw.icon} size={18} />
+        <Icon name={tw.icon} size={20} />
         {tw.useBadge && <StripeBadge useBadge={tw.useBadge} />}
       </span>
       {showName && (
@@ -459,7 +459,7 @@ function StripeMore({ windows }: { windows: ToolWindowContribution[] }) {
         onClick={() => setOpen((v) => !v)}
         {...tooltipAttrs("More Tool Windows")}
       >
-        <Icon name="more-horizontal" size={18} />
+        <Icon name="more-horizontal" size={20} />
       </button>
       <Menu
         open={open}
@@ -522,7 +522,7 @@ export function ToolWindowStripe({
           <StripeButton tw={w} active={isActive(w)} focused={focused === w.id} side={side} showName={showNames} />
         </div>
       ))}
-      <div className={styles.stripeSlot}>{indicator(slot, null)}</div>
+      <div className={clsx(styles.stripeSlot, styles.stripeSlotEnd)}>{indicator(slot, null)}</div>
     </div>
   );