From 76eef473aae1aaebb43a599b9dcfacbab67d0347 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roberto=20Bert=C3=B3?=
 <463349+robertoberto@users.noreply.github.com>
Date: Mon, 18 May 2026 12:02:27 -0300
Subject: [PATCH] feat: close sortable tabs with middle-click (#1304)

Aligns tab behavior with browsers and editors: pressing the middle mouse
button on any closable tab in SortableTabsStrip closes it without going
through the visible close icon.

- onAuxClick handler triggers onClose when event.button === 1.
- onMouseDown preventDefault on middle button suppresses the browser's
  autoscroll affordance.
- Both handlers no-op when the tab is not closable, keeping non-editor
  tab strips (skills catalog, settings sections, etc.) untouched.
---
 .../src/components/ui/sortable-tabs-strip.tsx | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/ui/src/components/ui/sortable-tabs-strip.tsx b/packages/ui/src/components/ui/sortable-tabs-strip.tsx
index 1ee67178..52201ade 100644
--- a/packages/ui/src/components/ui/sortable-tabs-strip.tsx
+++ b/packages/ui/src/components/ui/sortable-tabs-strip.tsx
@@ -377,10 +377,31 @@ export const SortableTabsStrip: React.FC<SortableTabsStripProps> = ({
                 ? 'flex-none basis-auto'
                 : (isMobile ? 'flex-1 basis-0 min-w-0' : 'flex-1 basis-0 min-w-fit'))
               : 'min-w-0 flex-1 basis-0';
+          const handleAuxClick = closable
+            ? (event: React.MouseEvent<HTMLDivElement>) => {
+                // Middle-click (button === 1) closes the tab. Matches browser tab behavior.
+                if (event.button !== 1) {
+                  return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onClose?.(item.id);
+              }
+            : undefined;
+          const handleMouseDown = closable
+            ? (event: React.MouseEvent<HTMLDivElement>) => {
+                // Prevent the browser's middle-click autoscroll affordance.
+                if (event.button === 1) {
+                  event.preventDefault();
+                }
+              }
+            : undefined;
           return (
             <Wrapper key={item.id} id={item.id} className={wrapperClassName}>
               <div
                 ref={(element) => setTabRef(item.id, element)}
+                onAuxClick={handleAuxClick}
+                onMouseDown={handleMouseDown}
                 className={cn(
                   'group flex h-full min-w-0 flex-nowrap items-center',
                   (isScrollable || useIntrinsicPillSizing)