From 85ea3956e84f1e6b725864f2900dd38dbc90f406 Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Tue, 11 Aug 2026 11:00:06 -0700
Subject: [PATCH] Stop the drag from selecting the tab's text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A pointer-driven drag is still a mouse drag as far as the browser is
concerned, so moving a tab highlighted its label blue — something the OS
drag image never did, and the last visible difference between this and
a real drag.

`select-none` on the tab. The rename field gets `select-text` back:
`user-select` inherits, and selecting text is exactly what that field is
for.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 app/src/components/layout/MainTabs.test.tsx | 13 +++++++++++++
 app/src/components/layout/MainTabs.tsx      |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/src/components/layout/MainTabs.test.tsx b/app/src/components/layout/MainTabs.test.tsx
index c967d63..855b789 100644
--- a/app/src/components/layout/MainTabs.test.tsx
+++ b/app/src/components/layout/MainTabs.test.tsx
@@ -127,6 +127,19 @@ describe("MainTabs reordering", () => {
     expect(useAppState.getState().activeTabKey).toBe(HOME);
   });
 
+  it("does not let a drag select the tab's text", () => {
+    // A pointer-driven drag is still a mouse drag as far as the browser is
+    // concerned, so without this the label highlights blue while you move it.
+    // The rename field is exempt — selecting there is the whole point.
+    render(<MainTabs />);
+    for (const tab of screen.getAllByRole("tab")) {
+      expect(tab.className).toContain("select-none");
+    }
+
+    fireEvent.doubleClick(screen.getAllByRole("tab")[1]);
+    expect(screen.getByLabelText("Rename tab").className).toContain("select-text");
+  });
+
   it("shows the tab itself under the cursor while dragging", () => {
     // A dimmed source tab and a thin line do not read as "I am holding this
     // tab" — the dragged copy is what makes the gesture legible.
diff --git a/app/src/components/layout/MainTabs.tsx b/app/src/components/layout/MainTabs.tsx
index c962503..0ac7287 100644
--- a/app/src/components/layout/MainTabs.tsx
+++ b/app/src/components/layout/MainTabs.tsx
@@ -178,7 +178,7 @@ export default function MainTabs() {
   };
 
   const tabClass = (active: boolean, dragging: boolean) =>
-    `flex items-center gap-1.5 pl-3 pr-1.5 h-full text-xs cursor-pointer border-r border-[var(--border-color)] transition-colors ${
+    `flex items-center gap-1.5 pl-3 pr-1.5 h-full text-xs cursor-pointer select-none border-r border-[var(--border-color)] transition-colors ${
       active
         ? "bg-[var(--bg-primary)] text-[var(--text-primary)]"
         : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
@@ -402,7 +402,7 @@ export default function MainTabs() {
               if (e.key === "Enter") (e.target as HTMLInputElement).blur();
               if (e.key === "Escape") setRenamingId(null);
             }}
-            className="max-w-[180px] px-1 py-0 bg-[var(--bg-primary)] border border-[var(--accent)] rounded-[var(--radius-control)] text-xs text-[var(--text-primary)]"
+            className="max-w-[180px] px-1 py-0 select-text bg-[var(--bg-primary)] border border-[var(--accent)] rounded-[var(--radius-control)] text-xs text-[var(--text-primary)]"
           />
         ) : (
           <span className="truncate max-w-[180px]" title={displayLabel}>
@@ -465,7 +465,7 @@ export default function MainTabs() {
         <div
           aria-hidden="true"
           data-testid="tab-drag-ghost"
-          className="fixed z-50 flex items-center gap-1.5 px-3 h-8 text-xs rounded-[var(--radius-control)] bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--accent)] pointer-events-none"
+          className="fixed z-50 flex items-center gap-1.5 px-3 h-8 text-xs rounded-[var(--radius-control)] bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--accent)] pointer-events-none select-none"
           style={{
             left: ghost.x,
             top: ghost.y,