From eef4220946b519603292b168c107102d640f62ec Mon Sep 17 00:00:00 2001
From: Jan Jaap <mail@janjaap.de>
Date: Thu, 30 Apr 2026 10:41:38 +0200
Subject: [PATCH] fix(web): match plan sheet width to inline sidebar width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, on viewports just below the 980px inline-layout breakpoint,
the plan/task sidebar opened as a sheet sized for diff/code content
(min(42vw, 28rem) — up to ~448px wide). The only way to shrink it was
to resize the window above 980px, at which point it switches to the
inline sidebar at 340px.

Make the sheet match the inline sidebar width (340px) so the transition
across the breakpoint is smooth and the sheet does not dominate the
viewport. The wide variant is preserved for the diff sheet, which
needs the extra width for code/diff content.

Changes:
- rightPanelLayout: split the wide and narrow sheet class names; share
  the wco/title-bar classes via a private base.
- RightPanelSheet: accept an optional className override (defaults to the
  wide variant).
- ChatView: pass RIGHT_PANEL_NARROW_SHEET_CLASS_NAME for the plan sidebar
  sheet so it caps at 340px.

Co-Authored-By: Claude Sonnet 4.7 <noreply@anthropic.com>
---
 apps/web/src/components/ChatView.tsx        | 11 +++++++++--
 apps/web/src/components/RightPanelSheet.tsx |  8 +++++++-
 apps/web/src/rightPanelLayout.ts            | 18 ++++++++++++++++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 40cd1b421058..424fae3f3e5d 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -99,7 +99,10 @@ import { useTurnDiffSummaries } from "../hooks/useTurnDiffSummaries";
 import { useCommandPaletteStore } from "../commandPaletteStore";
 import { buildTemporaryWorktreeBranchName } from "@t3tools/shared/git";
 import { useMediaQuery } from "../hooks/useMediaQuery";
-import { RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY } from "../rightPanelLayout";
+import {
+  RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY,
+  RIGHT_PANEL_NARROW_SHEET_CLASS_NAME,
+} from "../rightPanelLayout";
 import { BranchToolbar } from "./BranchToolbar";
 import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings";
 import PlanSidebar from "./PlanSidebar";
@@ -3532,7 +3535,11 @@ export default function ChatView(props: ChatViewProps) {
         />
       ))}
       {shouldUsePlanSidebarSheet ? (
-        <RightPanelSheet open={planSidebarOpen} onClose={closePlanSidebar}>
+        <RightPanelSheet
+          open={planSidebarOpen}
+          onClose={closePlanSidebar}
+          className={RIGHT_PANEL_NARROW_SHEET_CLASS_NAME}
+        >
           <PlanSidebar
             activePlan={activePlan}
             activeProposedPlan={sidebarProposedPlan}
diff --git a/apps/web/src/components/RightPanelSheet.tsx b/apps/web/src/components/RightPanelSheet.tsx
index ebc4aa0a698f..03fb063561d2 100644
--- a/apps/web/src/components/RightPanelSheet.tsx
+++ b/apps/web/src/components/RightPanelSheet.tsx
@@ -7,6 +7,12 @@ export function RightPanelSheet(props: {
   children: ReactNode;
   open: boolean;
   onClose: () => void;
+  /**
+   * Override the default sheet sizing classes. Use one of the named exports
+   * from `rightPanelLayout` (e.g. `RIGHT_PANEL_NARROW_SHEET_CLASS_NAME`) to
+   * pick a specific width preset; defaults to the wide variant.
+   */
+  className?: string;
 }) {
   return (
     <Sheet
@@ -21,7 +27,7 @@ export function RightPanelSheet(props: {
         side="right"
         showCloseButton={false}
         keepMounted
-        className={RIGHT_PANEL_SHEET_CLASS_NAME}
+        className={props.className ?? RIGHT_PANEL_SHEET_CLASS_NAME}
       >
         {props.children}
       </SheetPopup>
diff --git a/apps/web/src/rightPanelLayout.ts b/apps/web/src/rightPanelLayout.ts
index 5528072e57b3..0ea6c19c525b 100644
--- a/apps/web/src/rightPanelLayout.ts
+++ b/apps/web/src/rightPanelLayout.ts
@@ -1,3 +1,17 @@
 export const RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 980px)";
-export const RIGHT_PANEL_SHEET_CLASS_NAME =
-  "w-[min(42vw,28rem)] min-w-80 max-w-[28rem] p-0 max-[760px]:w-[min(88vw,24rem)] max-[760px]:min-w-0 wco:mt-[env(titlebar-area-height)] wco:h-[calc(100%-env(titlebar-area-height))] wco:max-h-[calc(100%-env(titlebar-area-height))]";
+
+const RIGHT_PANEL_SHEET_BASE_CLASS_NAME =
+  "p-0 wco:mt-[env(titlebar-area-height)] wco:h-[calc(100%-env(titlebar-area-height))] wco:max-h-[calc(100%-env(titlebar-area-height))]";
+
+/**
+ * Wide sheet (e.g. diff viewer) — sized for code/diff content with room for
+ * long lines on tablet-sized viewports.
+ */
+export const RIGHT_PANEL_SHEET_CLASS_NAME = `w-[min(42vw,28rem)] min-w-80 max-w-[28rem] max-[760px]:w-[min(88vw,24rem)] max-[760px]:min-w-0 ${RIGHT_PANEL_SHEET_BASE_CLASS_NAME}`;
+
+/**
+ * Narrow sheet (e.g. plan/task sidebar) — caps at 340px to match the inline
+ * sidebar width on wide viewports, preventing the sheet from covering most
+ * of the content area on viewports just below the inline-layout breakpoint.
+ */
+export const RIGHT_PANEL_NARROW_SHEET_CLASS_NAME = `w-[min(88vw,340px)] max-w-[340px] ${RIGHT_PANEL_SHEET_BASE_CLASS_NAME}`;