fix(web): match plan sheet width to inline sidebar width

apps/web/src/components/ChatView.tsx

@@ -99,7 +99,10 @@
 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";
@@ -1579,7 +1582,7 @@
   );
 
   const focusComposer = useCallback(() => {
     composerRef.current?.focusAtEnd();
   }, []);
   const scheduleComposerFocus = useCallback(() => {
     window.requestAnimationFrame(() => {
@@ -1587,7 +1590,7 @@
     });
   }, [focusComposer]);
   const addTerminalContextToDraft = useCallback((selection: TerminalContextSelection) => {
     composerRef.current?.addTerminalContext(selection);
   }, []);
   const setTerminalOpen = useCallback(
     (open: boolean) => {
@@ -2266,7 +2269,7 @@
       const shortcutContext = {
         terminalFocus: isTerminalFocused(),
         terminalOpen: Boolean(terminalState.terminalOpen),
         modelPickerOpen: composerRef.current?.isModelPickerOpen() ?? false,
       };
 
       const command = resolveShortcutCommand(event, keybindings, {
@@ -2801,7 +2804,7 @@
         };
       });
       promptRef.current = "";
       composerRef.current?.resetCursorState({ cursor: 0 });
     },
     [activePendingProgress?.activeQuestion, activePendingUserInput],
   );
@@ -2828,7 +2831,7 @@
           ),
         },
       }));
       const snapshot = composerRef.current?.readSnapshot();
       if (
         snapshot?.value !== value ||
         snapshot.cursor !== nextCursor ||
@@ -2891,7 +2894,7 @@
         return;
       }
 
       const sendCtx = composerRef.current?.getSendContext();
       if (!sendCtx) {
         return;
       }
@@ -3027,7 +3030,7 @@
       return;
     }
 
     const sendCtx = composerRef.current?.getSendContext();
     if (!sendCtx) {
       return;
     }
@@ -3532,7 +3535,11 @@
         />
       ))}
       {shouldUsePlanSidebarSheet ? (
-        <RightPanelSheet open={planSidebarOpen} onClose={closePlanSidebar}>
+        <RightPanelSheet
+          open={planSidebarOpen}
+          onClose={closePlanSidebar}
+          className={RIGHT_PANEL_NARROW_SHEET_CLASS_NAME}
+        >
           <PlanSidebar
             activePlan={activePlan}
             activeProposedPlan={sidebarProposedPlan}

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>

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}`;