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..d0a432eb9e5ad 100644
--- a/apps/web/src/components/preview/PreviewPanelShell.tsx
+++ b/apps/web/src/components/preview/PreviewPanelShell.tsx
@@ -150,13 +150,12 @@ 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. */}
+      {/* 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 && "overflow-clip",
-          collapsible && !maximized && "flex justify-end",
+          collapsible && "relative overflow-clip",
+          collapsible && !maximized && "flex max-[360px]:justify-end",
         )}
       >
         <div