fix(workbench): narrow the icon-only tool window stripe (#1405)

The icon-only tool window stripes were 44px wide against a 34px bottom frame, and compact mode shrank the status bar but not the stripes. Icon-only stripe buttons now follow a --stripe-icon-button token (28px, 24px in compact mode) with a 4px outer margin, so the side frames are 38px (34px compact). Dragging the stripe edge stops at the same width. The unused --h-stripe-button token is removed; the stripe with names is unchanged.

Co-authored-by: jaw52 <[email protected]>

src/styles/tokens.css

@@ -230,7 +230,8 @@ html {
 
   /* metrics (theme JSON at 100%) */
   --h-titlebar: 40px;
-  --h-stripe-button: 48px;
+  /* tool window stripe button, icons only */
+  --stripe-icon-button: 28px;
   --h-header: 40px;
   --h-tabbar: 38px;
   --h-tab: 28px;
@@ -1351,7 +1352,7 @@ html {
   --h-row: 20px;
   --h-list-row: 20px;
   --h-statusbar: 24px;
-  --h-stripe-button: 40px;
+  --stripe-icon-button: 24px;
   --h-field: 24px;
   --h-button: 24px;
 }

src/workbench/toolwindows/ToolWindows.module.css

@@ -159,9 +159,9 @@
 /* Stripes */
 .stripe {
   /* --stripe-drag: the width under the pointer while the stripe edge is dragged. */
-  --stripe-button: var(--stripe-drag, 32px);
-  /* Outer padding: icons only sit centred between equal margins. */
-  --stripe-pad: var(--island-gap);
+  --stripe-button: var(--stripe-drag, var(--stripe-icon-button));
+  /* Outer padding: narrower than the island gap so the side frame stays close to the status bar's height, as in IDEA. */
+  --stripe-pad: 4px;
   width: calc(var(--stripe-button) + var(--stripe-pad) + var(--island-gap));
   container-type: inline-size;
   flex: none;
@@ -237,8 +237,8 @@
 .stripeButton {
   position: relative;
   flex: none;
-  width: 32px;
-  height: 32px;
+  width: var(--stripe-icon-button);
+  height: var(--stripe-icon-button);
   display: flex;
   flex-direction: column;
   align-items: center;

src/workbench/toolwindows/ToolWindows.tsx

@@ -133,8 +133,7 @@ async function setShowToolWindowNames(on: boolean) {
   useProject.setState({ settings });
 }
 
-/** Stripe button widths: icons only, and the range with names. */
-const STRIPE_ICONS = 32;
+/** Stripe button widths with names; icons only follow `--stripe-icon-button` (smaller in compact mode). */
 const STRIPE_MIN = 44;
 const STRIPE_DEFAULT = 56;
 const STRIPE_MAX = 96;
@@ -202,8 +201,8 @@ function StripeHandle({
 }) {
   const sign = side === "left" ? 1 : -1;
   // The stripe follows the pointer; names show from STRIPE_MIN (truncated), icons only below it.
-  const resolve = (raw: number) => {
-    const px = Math.round(Math.min(STRIPE_MAX, Math.max(STRIPE_ICONS, raw)));
+  const resolve = (raw: number, icons: number) => {
+    const px = Math.round(Math.min(STRIPE_MAX, Math.max(icons, raw)));
     return px < STRIPE_MIN ? { names: false, width, px } : { names: true, width: px, px };
   };
 
@@ -214,13 +213,14 @@ function StripeHandle({
     const el = e.currentTarget;
     el.setPointerCapture(e.pointerId);
     const origin = e.clientX;
-    const start = names ? width : STRIPE_ICONS;
+    const icons = parseFloat(getComputedStyle(stripe).getPropertyValue("--stripe-icon-button")) || 28;
+    const start = names ? width : icons;
     const cursor = document.body.style.cursor;
     document.body.style.cursor = "col-resize";
     let next = { names, width, px: start };
     const move = (ev: globalThis.PointerEvent) => {
       if (!(ev.buttons & 1)) return end();
-      const r = resolve(start + sign * (ev.clientX - origin));
+      const r = resolve(start + sign * (ev.clientX - origin), icons);
       if (r.names !== next.names) onPreview(r.names);
       next = r;
       stripe.style.setProperty("--stripe-drag", `${r.px}px`);