From 429c625a8515f9c2e4af28c488fbf32ce7789645 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Sat, 3 Oct 2026 13:31:44 -0700
Subject: [PATCH] fix(web): workspace card docks beside chat when the window is
 narrow (#14992)

Chat stays centered while the workspace card fits beside it with 32px to spare. When it does not fit, chat moves left only as far as needed, narrows only after it reaches the left padding, and the card becomes a popover below a 640px chat. The card is lighter: 280px wide, 32px rows, no section labels, no "Project folder" hint.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../BranchToolbarEnvModeSelector.tsx          | 14 ++++--
 apps/web/src/components/GitActionsControl.tsx |  2 +-
 apps/web/src/components/chat/ChatCanvas.tsx   |  6 ++-
 .../src/components/chat/ChatCanvasContext.ts  |  1 +
 .../src/components/chat/ThreadDetailsCard.tsx |  9 +++-
 .../components/chat/ThreadDetailsControl.tsx  |  2 +-
 .../components/chat/ThreadDetailsPanel.tsx    |  4 +-
 .../chat/ThreadRelationshipsControl.tsx       |  4 +-
 .../components/chat/chatCanvasLayout.test.ts  | 46 ++++++++++++++++++-
 .../src/components/chat/chatCanvasLayout.ts   | 26 +++++++++--
 .../chat/threadDetailsCardLayout.test.ts      | 28 +++++------
 .../chat/threadDetailsCardLayout.ts           | 15 ++++--
 .../chat/threadDetailsPanelStyles.ts          |  4 +-
 apps/web/src/index.css                        |  2 +-
 14 files changed, 123 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/components/BranchToolbarEnvModeSelector.tsx b/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
index 465be828364b5e6d9b19d8a0798e4f4b243e6b9d..3afa31e2acee15e16b32bf2f678afebcc72a9bdc 100644
--- a/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
+++ b/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
@@ -59,7 +59,11 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
 }: BranchToolbarEnvModeSelectorProps) {
   const workspacePath = displayMode === "panel" ? (activeWorktreePath ?? workspaceRoot) : null;
   const workspaceDisplayName = resolveWorkspaceDisplayName(workspacePath);
-  const workspaceKind = activeWorktreePath ? "Worktree" : "Project folder";
+  // The panel names the workspace kind only when it is not the project folder.
+  const workspaceKind = activeWorktreePath ? "Worktree" : null;
+  const lockedWorkspaceKind = forceNewWorktree ? "Worktree" : workspaceKind;
+  const selectWorkspaceKind =
+    effectiveEnvMode === "worktree" && !activeWorktreePath ? "Create" : workspaceKind;
   const composerFloatingLayerProps = useComposerMenuProps();
   const showPreviousWorktree = Boolean(previousWorktreeLabel && onUsePreviousWorktree);
   const envModeItems = useMemo(
@@ -147,9 +151,9 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
             : (workspaceDisplayName ??
               resolveLockedWorkspaceLabel(activeWorktreePath, effectiveEnvMode))}
         </ComposerContextLabel>
-        {displayMode === "panel" ? (
+        {displayMode === "panel" && lockedWorkspaceKind ? (
           <span className="shrink-0 text-3xs font-normal text-muted-foreground/70">
-            {forceNewWorktree ? "Worktree" : workspaceKind}
+            {lockedWorkspaceKind}
           </span>
         ) : null}
       </span>
@@ -210,9 +214,9 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
           <ComposerContextLabel displayMode={displayMode}>
             <SelectValue />
           </ComposerContextLabel>
-          {displayMode === "panel" ? (
+          {displayMode === "panel" && selectWorkspaceKind ? (
             <span className="shrink-0 text-3xs font-normal text-muted-foreground/70">
-              {effectiveEnvMode === "worktree" && !activeWorktreePath ? "Create" : workspaceKind}
+              {selectWorkspaceKind}
             </span>
           ) : null}
         </TooltipTrigger>
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 9d9d82c6273f46f7da85efd8cd4b7d748c421adf..e6635d8921657ac86ede20021ea2710cd6c4e57b 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -1880,7 +1880,7 @@ export default function GitActionsControl({
             // the output row expands below.
             <GitActionElapsedTime
               startedAtMs={gitActionProgress.startedAtMs}
-              className="flex h-9 shrink-0 items-center self-start pe-2.5 text-2xs font-normal tabular-nums text-muted-foreground"
+              className="flex h-8 shrink-0 items-center self-start pe-2.5 text-2xs font-normal tabular-nums text-muted-foreground"
             />
           ) : (
             <>
diff --git a/apps/web/src/components/chat/ChatCanvas.tsx b/apps/web/src/components/chat/ChatCanvas.tsx
index bc222d07852e6f31b79f69fb415a81753020df0c..504db173048995d6e81ad0617b59ba24900cc1de 100644
--- a/apps/web/src/components/chat/ChatCanvas.tsx
+++ b/apps/web/src/components/chat/ChatCanvas.tsx
@@ -11,7 +11,10 @@ import { ChatCanvasContext } from "./ChatCanvasContext";
 import { resolveChatCanvasLayout, type ChatCanvasPreview } from "./chatCanvasLayout";
 import type { PreviewMiniPlayerObstacles } from "../preview/previewMiniPlayerLayout";
 
-/** Owns the available conversation space. Floating cards never reserve it themselves. */
+/**
+ * Owns the available conversation space. Cards only report where they sit; the
+ * canvas decides when chat moves over to make room for them.
+ */
 export function ChatCanvas({
   composerOverlayElement,
   children,
@@ -96,6 +99,7 @@ export function ChatCanvas({
     const container = { width: measurements.width, height: measurements.height };
     return {
       container,
+      lane: { padding: measurements.padding, minChatWidth: measurements.minChatWidth },
       layout: resolveChatCanvasLayout({ ...measurements, container, preview, detailsCard }),
       previewKey: preview?.key ?? null,
       reportPreview,
diff --git a/apps/web/src/components/chat/ChatCanvasContext.ts b/apps/web/src/components/chat/ChatCanvasContext.ts
index b810b02392405fa837f88430fd4d2da203824590..44b91f82632af9aaf931477aec94fcbb09f62465 100644
--- a/apps/web/src/components/chat/ChatCanvasContext.ts
+++ b/apps/web/src/components/chat/ChatCanvasContext.ts
@@ -4,6 +4,7 @@ import type { PreviewMiniPlayerObstacles } from "../preview/previewMiniPlayerLay
 
 export const ChatCanvasContext = createContext<{
   container: { width: number; height: number };
+  lane: { padding: number; minChatWidth: number };
   layout: ReturnType<typeof resolveChatCanvasLayout>;
   previewKey: string | null;
   reportPreview: (preview: ChatCanvasPreview) => void;
diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx
index 1886aa1ec483c9c8ea2bb7757836497dd03f889e..dfee1453eda984e7e07865690e6827704576a250 100644
--- a/apps/web/src/components/chat/ThreadDetailsCard.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx
@@ -29,12 +29,17 @@ export function ThreadDetailsCard({
   const preferredPlacement = canvas
     ? resolveThreadDetailsCardLayout({
         container: canvas.container,
-        chat: canvas.layout.chat,
+        lane: canvas.lane,
         frame: null,
       })
     : null;
   const placement = canvas
-    ? resolveThreadDetailsCardLayout({ container: canvas.container, ...canvas.layout })
+    ? resolveThreadDetailsCardLayout({
+        container: canvas.container,
+        lane: canvas.lane,
+        frame: canvas.layout.frame,
+        overlapsDetailsCard: canvas.layout.overlapsDetailsCard,
+      })
     : null;
   const mode = placement ? "inline" : "popover";
   const inlineOpen = useRightPanelStore((state) =>
diff --git a/apps/web/src/components/chat/ThreadDetailsControl.tsx b/apps/web/src/components/chat/ThreadDetailsControl.tsx
index 551cc54282aa0ca171b3aabf2f1c8096415993a5..3169f80184886aa99df6da21dca45b8c02f7c226 100644
--- a/apps/web/src/components/chat/ThreadDetailsControl.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsControl.tsx
@@ -56,7 +56,7 @@ export function ThreadDetailsControl({
         className: cn(
           "relative inline-flex shrink-0 cursor-pointer items-center whitespace-nowrap border outline-none transition-[box-shadow,scale] [&:active:not([aria-haspopup])]:scale-[0.97] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-64 aria-disabled:cursor-not-allowed aria-disabled:opacity-64 [&_svg]:shrink-0",
           parts[part],
-          multiline && "h-auto min-h-9 py-0.75 disabled:opacity-100 sm:h-auto",
+          multiline && "h-auto min-h-8 py-0.75 disabled:opacity-100 sm:h-auto",
           tone === "muted" && "text-muted-foreground/70 hover:text-foreground/80",
           tone === "destructive" &&
             "text-destructive hover:text-destructive data-pressed:text-destructive",
diff --git a/apps/web/src/components/chat/ThreadDetailsPanel.tsx b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
index 1d02a0ada889031c99b07daeadb299dc18ea9c13..5b79f0c00f5724130d62887639a18ae9e78c1964 100644
--- a/apps/web/src/components/chat/ThreadDetailsPanel.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
@@ -126,7 +126,7 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
             headingId="thread-details-workspace-heading"
             title="Workspace"
             separated={false}
-            showHeading={density === "full"}
+            showHeading={false}
           >
             {props.versionMismatch ? (
               <div className="mx-1 mb-2 flex gap-2 rounded-xl border border-warning/30 bg-warning/6 p-3">
@@ -198,7 +198,7 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
             <ThreadDetailsSection
               headingId="thread-details-version-control-heading"
               title="Version Control"
-              showHeading={density === "full"}
+              showHeading={false}
               separated={density === "full"}
             >
               <div className="flex flex-col">
diff --git a/apps/web/src/components/chat/ThreadRelationshipsControl.tsx b/apps/web/src/components/chat/ThreadRelationshipsControl.tsx
index ac0235f85d1c05d046f98638b46936d90c13c6d1..418f917a3f617a6af13ff33738d7779867e12c0a 100644
--- a/apps/web/src/components/chat/ThreadRelationshipsControl.tsx
+++ b/apps/web/src/components/chat/ThreadRelationshipsControl.tsx
@@ -97,7 +97,7 @@ export function ThreadLineageRowList(props: {
         <button
           type="button"
           onClick={props.onShowMore}
-          className={`flex h-9 w-full cursor-pointer items-center rounded-lg ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-sm font-medium text-muted-foreground/70 hover:bg-black/[0.055] hover:text-foreground/80 dark:hover:bg-white/[0.075]`}
+          className={`flex h-8 w-full cursor-pointer items-center rounded-lg ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-sm font-medium text-muted-foreground/70 hover:bg-black/[0.055] hover:text-foreground/80 dark:hover:bg-white/[0.075]`}
         >
           <PlusIcon aria-hidden className="size-4 shrink-0" />
           Show {Math.min(props.hiddenCount, THREAD_LINEAGE_PAGE_COUNT)} more
@@ -394,7 +394,7 @@ export function ThreadRelationshipsPanel(props: {
                 </>
               );
               return (
-                <li key={threadId} className="group flex h-9 items-center rounded-lg">
+                <li key={threadId} className="group flex h-8 items-center rounded-lg">
                   {isMergeTarget ? (
                     <div className={THREAD_DETAILS_PANEL_LINK_SPLIT_GROUP_CLASS}>
                       <Tooltip>
diff --git a/apps/web/src/components/chat/chatCanvasLayout.test.ts b/apps/web/src/components/chat/chatCanvasLayout.test.ts
index 5d55fe0e7e3a5a792d7e95c644b3b5fae409a0d0..ea99128a73d0e5480ad8fac96dbe9d59cb0f557b 100644
--- a/apps/web/src/components/chat/chatCanvasLayout.test.ts
+++ b/apps/web/src/components/chat/chatCanvasLayout.test.ts
@@ -212,7 +212,12 @@ describe("chat canvas layout", () => {
         });
       };
       const density = (result: ReturnType<typeof layout>) => {
-        const card = resolveThreadDetailsCardLayout({ container, ...result });
+        const card = resolveThreadDetailsCardLayout({
+          container,
+          lane: { padding: 20, minChatWidth: 640 },
+          frame: result.frame,
+          overlapsDetailsCard: result.overlapsDetailsCard,
+        });
         return card
           ? resolveThreadDetailsCardDensity(card.height, { full: 327, compact: 182 })
           : "hidden";
@@ -251,3 +256,42 @@ describe("chat canvas layout", () => {
     expect(result.frame).toEqual({ x: 272, y: 396, width: 1300, height: 400 });
   });
 });
+
+describe("workspace card beside chat", () => {
+  const withCard = (width: number, player: ChatCanvasPreview | null = null, maxChatWidth = 736) =>
+    resolveChatCanvasLayout({
+      container: { width, height: 900 },
+      maxChatWidth,
+      composerHeight: 180,
+      detailsCard: { left: width - 292, right: width - 12, bottom: 400 },
+      preview: player,
+    });
+  it("keeps chat centered while the card fits beside it", () => {
+    expect(withCard(1384).chat).toEqual({ left: 324, width: 736, insetStart: 0, insetEnd: 0 });
+  });
+  it("moves chat left only as far as the card requires", () => {
+    expect(withCard(1383).chat).toEqual({ left: 323, width: 736, insetStart: 0, insetEnd: 1 });
+    expect(withCard(1147).chat).toEqual({ left: 87, width: 736, insetStart: 0, insetEnd: 237 });
+  });
+  it("narrows chat only after it reaches the left padding", () => {
+    expect(withCard(1080).chat).toMatchObject({ left: 20, width: 736 });
+    expect(withCard(1000).chat).toEqual({ left: 20, width: 656, insetStart: 0, insetEnd: 304 });
+    expect(withCard(984).chat).toMatchObject({ left: 20, width: 640 });
+  });
+  it("keeps a full-width chat clear of the card", () => {
+    expect(withCard(1147, null, 10_000).chat).toEqual({
+      left: 20,
+      width: 803,
+      insetStart: 0,
+      insetEnd: 304,
+    });
+  });
+  it("keeps centered chat in place when a new preview opens below the card", () => {
+    expect(withCard(1440, preview)).toEqual({
+      chat: { left: 352, width: 736, insetStart: 0, insetEnd: 0 },
+      frame: { x: 1108, y: 688, width: 320, height: 200 },
+      overlapsChat: false,
+      overlapsDetailsCard: false,
+    });
+  });
+});
diff --git a/apps/web/src/components/chat/chatCanvasLayout.ts b/apps/web/src/components/chat/chatCanvasLayout.ts
index e4c64fa55752d7f26d3545cf0962c2b9dbc6c7eb..714b9e286402b2bca684671fe37127489552d01b 100644
--- a/apps/web/src/components/chat/chatCanvasLayout.ts
+++ b/apps/web/src/components/chat/chatCanvasLayout.ts
@@ -19,8 +19,11 @@ export interface ChatCanvasPreview {
 }
 
 const GAP = 12;
+// Minimum space between chat and the workspace card. Chat stays centered while
+// the card fits beside it with this much room.
+export const DETAILS_CARD_CLEARANCE = 32;
 
-/** Pure geometry shared by the conversation, composer, and floating preview. */
+/** Pure geometry shared by the conversation, composer, workspace card, and floating preview. */
 export function resolveChatCanvasLayout({
   container,
   preview,
@@ -38,9 +41,24 @@ export function resolveChatCanvasLayout({
   composerHeight?: number;
   detailsCard?: PreviewMiniPlayerObstacles["detailsCard"];
 }) {
-  const normalWidth = Math.max(0, Math.min(maxChatWidth, container.width - padding * 2));
-  const normalLeft = (container.width - normalWidth) / 2;
-  let chat = { left: normalLeft, width: normalWidth, insetStart: 0, insetEnd: 0 };
+  const centeredWidth = Math.max(0, Math.min(maxChatWidth, container.width - padding * 2));
+  // A workspace card that does not fit beside the centered chat first moves
+  // chat left, only as far as it needs. Chat narrows only after it reaches the
+  // left padding.
+  const laneRight = detailsCard
+    ? detailsCard.left - DETAILS_CARD_CLEARANCE
+    : container.width - padding;
+  const normalWidth = Math.max(0, Math.min(centeredWidth, laneRight - padding));
+  const normalLeft = Math.max(
+    padding,
+    Math.min((container.width - normalWidth) / 2, laneRight - normalWidth),
+  );
+  let chat = {
+    left: normalLeft,
+    width: normalWidth,
+    insetStart: 0,
+    insetEnd: Math.max(0, container.width - normalLeft * 2 - normalWidth),
+  };
   let frame: PreviewMiniPlayerFrame | null = null;
   let overlapsChat = false;
   if (preview && container.width > 0 && container.height > 0) {
diff --git a/apps/web/src/components/chat/threadDetailsCardLayout.test.ts b/apps/web/src/components/chat/threadDetailsCardLayout.test.ts
index 0d3ba656e4640d809a7bf8a506df1fe6419f1f30..165985245cd1d08423d57b8f4155bf5f622693da 100644
--- a/apps/web/src/components/chat/threadDetailsCardLayout.test.ts
+++ b/apps/web/src/components/chat/threadDetailsCardLayout.test.ts
@@ -4,37 +4,39 @@ import {
   resolveThreadDetailsCardLayout,
 } from "./threadDetailsCardLayout";
 
+const lane = { padding: 20, minChatWidth: 640 };
 const resolve = (width: number, height: number, previewY: number | null = null) =>
   resolveThreadDetailsCardLayout({
     container: { width, height },
-    chat: { left: (width - 736) / 2, width: 736 },
+    lane,
     frame: previewY === null ? null : { x: width - 332, y: previewY, width: 320, height: 240 },
   });
 
-describe("floating details card", () => {
-  it("uses the right margin without reserving chat space", () => {
+describe("workspace card", () => {
+  it("pins to the top right at a fixed width", () => {
     expect(resolve(1600, 900)).toEqual({
-      x: 1276,
+      x: 1308,
       y: 12,
-      width: 312,
+      width: 280,
       height: 876,
     });
-    expect(resolve(1344, 900)?.width).toBe(280);
+    expect(resolve(1344, 900)).toMatchObject({ x: 1052, width: 280 });
   });
-  it("hides when the margin cannot hold readable controls", () => {
-    expect(resolve(1200, 900)).toBeNull();
+  it("hides when a readable chat lane cannot fit beside it", () => {
+    expect(resolve(984, 900)).toMatchObject({ x: 692 });
+    expect(resolve(983, 900)).toBeNull();
   });
   it("keeps the card at the top right while the preview is freely dragged vertically", () => {
     for (const y of [12, 170, 250, 400, 648]) {
-      expect(resolve(1600, 900, y)).toEqual({ x: 1276, y: 12, width: 312, height: 876 });
+      expect(resolve(1600, 900, y)).toEqual({ x: 1308, y: 12, width: 280, height: 876 });
     }
   });
-  it("keeps width and height independent", () => {
+  it("keeps full height while a preview stays clear of the card", () => {
     expect(resolve(1344, 900, 600)).toMatchObject({ width: 280, height: 876 });
     expect(
       resolveThreadDetailsCardLayout({
         container: { width: 1600, height: 900 },
-        chat: { left: 432, width: 736 },
+        lane,
         frame: { x: 12, y: 100, width: 320, height: 240 },
       })?.height,
     ).toBe(876);
@@ -45,14 +47,14 @@ describe("card content fitting", () => {
   const place = (previewY: number, previewHeight = 365, overlapsDetailsCard = false) =>
     resolveThreadDetailsCardLayout({
       container: { width: 1584, height: 988 },
-      chat: { left: 424, width: 736 },
+      lane,
       frame: { x: 1260, y: previewY, width: 240, height: previewHeight },
       overlapsDetailsCard,
     });
   it("does not fold in response to a drag while the full card can be kept clear", () => {
     for (const y of [12, 170, 225, 240, 340, 380, 611]) {
       const placement = place(y)!;
-      expect(placement).toMatchObject({ x: 1260, y: 12, height: 964 });
+      expect(placement).toMatchObject({ x: 1292, y: 12, height: 964 });
       expect(resolveThreadDetailsCardDensity(placement.height, { full: 327, compact: 182 })).toBe(
         "full",
       );
diff --git a/apps/web/src/components/chat/threadDetailsCardLayout.ts b/apps/web/src/components/chat/threadDetailsCardLayout.ts
index b1f2fcb970573e7ed71a6eac9792dea0dddbf3fb..655aaa4870649caaff2601458e839e6c72d78c44 100644
--- a/apps/web/src/components/chat/threadDetailsCardLayout.ts
+++ b/apps/web/src/components/chat/threadDetailsCardLayout.ts
@@ -1,4 +1,5 @@
 import type { PreviewMiniPlayerFrame } from "../preview/previewMiniPlayerLayout";
+import { DETAILS_CARD_CLEARANCE } from "./chatCanvasLayout";
 
 export function resolveThreadDetailsCardDensity(
   height: number,
@@ -9,22 +10,26 @@ export function resolveThreadDetailsCardDensity(
   return "essential";
 }
 
-/** The card uses leftover space. It never changes the conversation's width. */
+/**
+ * The card pins to the top right while a readable chat lane fits beside it.
+ * The chat canvas decides whether chat moves over to make room.
+ */
 export function resolveThreadDetailsCardLayout({
   container,
-  chat,
+  lane,
   frame,
   overlapsDetailsCard = false,
 }: {
   container: { width: number; height: number };
-  chat: { left: number; width: number };
+  lane: { padding: number; minChatWidth: number };
   frame: PreviewMiniPlayerFrame | null;
   overlapsDetailsCard?: boolean;
 }) {
   const gap = 12;
-  const width = Math.min(312, container.width - chat.left - chat.width - gap * 2);
-  if (width < 240) return null;
+  // Keep in sync with --thread-details-panel-width, which sizes the popover.
+  const width = 280;
   const x = container.width - width - gap;
+  if (x - DETAILS_CARD_CLEARANCE - lane.padding < lane.minChatWidth) return null;
   // Resizing consumes the height above the player. Dragging first tries to
   // clear the full card and folds it only when there is no readable placement.
   const height =
diff --git a/apps/web/src/components/chat/threadDetailsPanelStyles.ts b/apps/web/src/components/chat/threadDetailsPanelStyles.ts
index 19005205ce6ea552bfdb34456d252299b96bfb10..523a97f3acaca32d19f9b81e9cf15e282f6c4db1 100644
--- a/apps/web/src/components/chat/threadDetailsPanelStyles.ts
+++ b/apps/web/src/components/chat/threadDetailsPanelStyles.ts
@@ -15,7 +15,7 @@ export const THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS = "gap-2.5 px-2.5 text-left"
 // The row supplies the first tint; the hovered or open segment adds a second tint.
 const THREAD_DETAILS_PANEL_SPLIT_BUTTON_SURFACE_CLASS = `${THREAD_DETAILS_PANEL_ROW_SURFACE_CLASS} data-popup-open:!bg-black/[0.055] dark:data-popup-open:!bg-white/[0.075]`;
 
-const THREAD_DETAILS_PANEL_CONTROL_CLASS = `h-9 min-w-0 rounded-lg border-transparent ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-[13px] font-medium text-foreground/80`;
+const THREAD_DETAILS_PANEL_CONTROL_CLASS = `h-8 min-w-0 rounded-lg border-transparent ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-[13px] font-medium text-foreground/80`;
 const THREAD_DETAILS_PANEL_SPLIT_GROUP_SURFACE_CLASS = `${THREAD_DETAILS_PANEL_HOVER_SURFACE_CLASS} has-[[data-popup-open]]:bg-black/[0.055] dark:has-[[data-popup-open]]:bg-white/[0.075]`;
 
 export const THREAD_DETAILS_PANEL_ROW_CLASS = `${THREAD_DETAILS_PANEL_CONTROL_CLASS} w-full justify-start ${THREAD_DETAILS_PANEL_ROW_SURFACE_CLASS}`;
@@ -32,7 +32,7 @@ export const THREAD_DETAILS_PANEL_LINK_SPLIT_PRIMARY_CLASS = `${THREAD_DETAILS_P
 /** The trailing half of a link split row when it carries a word ("Merge") rather than an icon. */
 export const THREAD_DETAILS_PANEL_LINK_SPLIT_ACTION_CLASS = `${THREAD_DETAILS_PANEL_CONTROL_CLASS} shrink-0 justify-center rounded-s-none text-primary ${THREAD_DETAILS_PANEL_SPLIT_BUTTON_SURFACE_CLASS}`;
 
-export const THREAD_DETAILS_PANEL_LOCKED_ROW_CLASS = `h-9 w-full min-w-0 justify-start rounded-lg border border-transparent ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-[13px] font-medium text-foreground/80 sm:h-9 sm:text-[13px]`;
+export const THREAD_DETAILS_PANEL_LOCKED_ROW_CLASS = `h-8 w-full min-w-0 justify-start rounded-lg border border-transparent ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-[13px] font-medium text-foreground/80 sm:h-8 sm:text-[13px]`;
 
 export const THREAD_DETAILS_PANEL_ICON_CLASS = "size-4 shrink-0 text-muted-foreground";
 
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 6a4b043f9612a8ff6f37d3e1aae390dbb2f1db82..65e2cef9c5d105bf8c584e61608dc05e70e06a7a 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -117,7 +117,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --workspace-titlebar-control-gap: 0.75rem;
   --workspace-titlebar-scroll-fade-height: 1.5rem;
   --chat-content-max-width: 46rem;
-  --thread-details-panel-width: 19.5rem;
+  --thread-details-panel-width: 17.5rem;
   /* The prompt on phones: iOS zooms into any input under 16px on focus. */
   --font-size-prompt-touch: max(var(--font-size-prompt, 1rem), 16px);
   /* Horizontal gutter shared by the page header and the chat column, clear of
-- 
2.54.0