From e556eb98205df7c0bff5ab440541b72af28325f1 Mon Sep 17 00:00:00 2001
From: Claude Belizaire <139932571+Claudesaul@users.noreply.github.com>
Date: Sun, 1 Nov 2026 16:32:01 -0500
Subject: [PATCH 1/2] fix(web): right panel's content slides again when it
 closes

Pinning all of the panel's content kept its tab bar clear of the title bar
controls, but left the panel looking empty partway through a close, because
the edge wiped away everything on its left side. Only the tab bar stays
pinned now.
---
 apps/web/src/components/RightPanelTabs.tsx        | 15 ++++++++++++++-
 .../src/components/preview/PreviewPanelShell.tsx  | 15 ++-------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index 596bdee96ad1f..ed50de61260c8 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -88,6 +88,7 @@ import { faviconUrlForOrigin } from "@t3tools/shared/favicon";
 import { useTheme } from "~/hooks/useTheme";
 import { useDeviceState } from "~/state/device";
 import type { PreviewPanelInlineSize } from "~/hooks/usePreviewPanelInlineSize";
+import { RESIZABLE_WIDTH_PROPERTY } from "~/hooks/useResizableWidth";
 import {
   newestPullRequestSummary,
   pullRequestEnvironment,
@@ -1315,6 +1316,10 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
     };
   };
 
+  // The panel's content slides with its closing edge. The tab bar stays against the
+  // window's edge instead, or it would slide under the title bar controls.
+  const tabBarPinned = props.mode === "inline" && props.open !== undefined && !props.maximized;
+
   return (
     <PreviewPanelShell
       workspaceArea
@@ -1338,7 +1343,9 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
           ownsDesktopTitleBar && "drag-region",
           ownsDesktopTitleBar && "wco:pr-(--workspace-native-controls-inset)",
           props.mode === "inline" && props.maximized && COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
+          tabBarPinned && "absolute top-0 right-0",
         )}
+        style={tabBarPinned ? { width: `calc(var(${RESIZABLE_WIDTH_PROPERTY}) - 1px)` } : undefined}
         data-right-panel-tabbar
       >
         <ScrollArea
@@ -1521,7 +1528,13 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
           />
         ) : null}
       </div>
-      <div className="flex min-h-0 flex-1 flex-col" data-right-panel-surface-content>
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col",
+          tabBarPinned && "pt-(--workspace-topbar-height)",
+        )}
+        data-right-panel-surface-content
+      >
         {props.activeSurfaceId === null ? (
           <RightPanelEmptyState
             onAddBrowser={props.onAddBrowser}
diff --git a/apps/web/src/components/preview/PreviewPanelShell.tsx b/apps/web/src/components/preview/PreviewPanelShell.tsx
index 9afe2882b09fa..dc972f9eb219c 100644
--- a/apps/web/src/components/preview/PreviewPanelShell.tsx
+++ b/apps/web/src/components/preview/PreviewPanelShell.tsx
@@ -150,20 +150,9 @@ function PreviewPanelShellFrame(
       data-preview-panel-maximized={maximized ? "true" : "false"}
     >
       {isInline && !maximized ? <RightPanelResizeHandle handlers={handlers} /> : null}
-      {/* Content stays pinned to the right edge, so closing uncovers the chat
-          instead of sliding the tab bar under the title bar controls. */}
-      <div
-        className={cn(
-          "h-full min-h-0 w-full",
-          collapsible && "overflow-clip",
-          collapsible && !maximized && "flex justify-end",
-        )}
-      >
+      <div className={cn("h-full min-h-0 w-full", collapsible && "relative overflow-clip")}>
         <div
-          className={cn(
-            "flex h-full min-h-0 min-w-0 flex-col",
-            collapsible && !maximized && "shrink-0",
-          )}
+          className="flex h-full min-h-0 min-w-0 flex-col"
           style={
             collapsible && !maximized
               ? { width: `calc(var(${RESIZABLE_WIDTH_PROPERTY}) - 1px)` }

From 5c444a399c8bf77dc6d07315e6dfb7f7386dcfbd Mon Sep 17 00:00:00 2001
From: Claude Belizaire <139932571+Claudesaul@users.noreply.github.com>
Date: Sun, 1 Nov 2026 17:45:49 -0500
Subject: [PATCH 2/2] fix(web): keep the panel's right edge visible in a narrow
 row

---
 .../src/components/preview/PreviewPanelShell.tsx   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/preview/PreviewPanelShell.tsx b/apps/web/src/components/preview/PreviewPanelShell.tsx
index dc972f9eb219c..d0a432eb9e5ad 100644
--- a/apps/web/src/components/preview/PreviewPanelShell.tsx
+++ b/apps/web/src/components/preview/PreviewPanelShell.tsx
@@ -150,9 +150,19 @@ function PreviewPanelShellFrame(
       data-preview-panel-maximized={maximized ? "true" : "false"}
     >
       {isInline && !maximized ? <RightPanelResizeHandle handlers={handlers} /> : null}
-      <div className={cn("h-full min-h-0 w-full", collapsible && "relative overflow-clip")}>
+      {/* A row narrower than the panel's minimum clips the left edge, keeping its controls visible. */}
+      <div
+        className={cn(
+          "h-full min-h-0 w-full",
+          collapsible && "relative overflow-clip",
+          collapsible && !maximized && "flex max-[360px]:justify-end",
+        )}
+      >
         <div
-          className="flex h-full min-h-0 min-w-0 flex-col"
+          className={cn(
+            "flex h-full min-h-0 min-w-0 flex-col",
+            collapsible && !maximized && "shrink-0",
+          )}
           style={
             collapsible && !maximized
               ? { width: `calc(var(${RESIZABLE_WIDTH_PROPERTY}) - 1px)` }