Skip to content

fix(web): right panel's content slides on close #28922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Claudesaul wants to merge 2 commits into
base: main
Choose a base branch
from
+17 −5
Open

fix(web): right panel's content slides on close #28922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e556eb9
fix(web): right panel's content slides again when it closes
Claudesaul Nov 1, 2026
5c444a3
fix(web): keep the panel's right edge visible in a narrow row
Claudesaul Nov 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion apps/web/src/components/RightPanelTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand Down
7 changes: 3 additions & 4 deletions apps/web/src/components/preview/PreviewPanelShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading