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(); + 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)]" /> ) : ( @@ -465,7 +465,7 @@ export default function MainTabs() {