Commit 0a0b6be96833adae68b36540c00d347eda278736 | the-knife

author	maria <maria@kuuro.net> 2026-09-03 20:38:43-04:00
committer	GitHub <noreply@github.com> 2026-09-03 20:38:43-04:00
log	0a0b6be96833adae68b36540c00d347eda278736
tree	058e89931e6632266c9e40090267c147f3b7d220
parent	d76b24dd15a219666941ab1b4967d8f738adcda0
signature	Signed by PGP key B5690EEEBB952194

fix(web): keep right panel controls clickable (#9517)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

2 files changed, 16 insertions(+), 4 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    RightPanelTabs.tsx

apps/web/src/components/ChatView.tsx+12-3

 @@ -1865,8 +1865,7 @@ function ChatViewContent(props: ChatViewProps) {
     panelAnimationDurationMs,
   );
   const rightPanelPresent = rightPanelPresence.present;
-  const rightPanelControlsInPanel =
+  const rightPanelControlsInPanel = rightPanelPresent && rightPanelOpen;
-    rightPanelPresent && (!shouldUseRightPanelSheet || rightPanelOpen);
   const renderedRightPanelSurface = rightPanelPresence.value?.activeSurface ?? null;
   const renderedRightPanelSurfaces = rightPanelPresence.value?.surfaces ?? [];
   const previewMiniPlayerVisible = shouldRenderPreviewMiniPlayer(
 @@ -7451,6 +7450,15 @@ function ChatViewContent(props: ChatViewProps) {
       <div className="pointer-events-auto flex h-full items-center">{panelToggleControls}</div>
     </div>
   );
+  const inlineRightPanelControls = (
+    <div className="mr-px flex h-full items-center gap-1 [-webkit-app-region:no-drag]">
+      <RightPanelMaximizeControl
+        maximized={rightPanelMaximized}
+        onToggle={toggleRightPanelMaximized}
+      />
+      {panelToggleControls}
+    </div>
+  );
   const rightPanelContent = activeThreadRef ? (
     renderedRightPanelSurface?.kind === "preview" ? (
       <Suspense fallback={null}>
 @@ -7611,7 +7619,7 @@ function ChatViewContent(props: ChatViewProps) {
           reserveNativeControls={reserveTitleBarControlInset && !inlineRightPanelOwnsTitleBar}
           className="relative bg-background"
         >
-          {!shouldUseRightPanelSheet || !rightPanelControlsInPanel ? panelLayoutControls : null}
+          {!rightPanelControlsInPanel ? panelLayoutControls : null}
           <ChatHeader
             {...(!supportsPullRequests || activeProjectRepository === null
               ? {}
 @@ -8039,6 +8047,7 @@ function ChatViewContent(props: ChatViewProps) {
           mode="inline"
           open={rightPanelOpen}
           maximized={rightPanelMaximized}
+          layoutControls={rightPanelOpen ? inlineRightPanelControls : null}
           surfaces={renderedRightPanelSurfaces}
           environmentId={activeThreadRef.environmentId}
           activeSurfaceId={renderedRightPanelSurface?.id ?? null}

apps/web/src/components/RightPanelTabs.tsx+4-1

 @@ -990,7 +990,10 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
           // controls a few pixels higher and the cluster jumps on open.
           props.mode === "inline" && !props.layoutControls ? "pr-28" : "pr-3",
           ownsDesktopTitleBar && "drag-region",
-          ownsDesktopTitleBar && "wco:pr-[calc(var(--workspace-native-controls-inset)+6rem)]",
+          ownsDesktopTitleBar &&
+            (props.layoutControls
+              ? "wco:pr-[var(--workspace-native-controls-inset)]"
+              : "wco:pr-[calc(var(--workspace-native-controls-inset)+6rem)]"),
           props.mode === "inline" && props.maximized && COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
         )}
         data-right-panel-tabbar