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() { 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)} > - + {tw.useBadge && } {showName && ( @@ -459,7 +459,7 @@ function StripeMore({ windows }: { windows: ToolWindowContribution[] }) { onClick={() => setOpen((v) => !v)} {...tooltipAttrs("More Tool Windows")} > - + ))} -
{indicator(slot, null)}
+
{indicator(slot, null)}
);