From 1d7bec0845475158aaebfeb07b09b563837b1bb0 Mon Sep 17 00:00:00 2001 From: flamboh Date: Mon, 2 Nov 2026 04:34:08 +0000 Subject: [PATCH 1/2] fix(web): side pane tab bars match their pane body --- apps/web/src/components/RightPanelTabs.tsx | 3 +-- apps/web/src/components/preview/PreviewView.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx index a28c2ae24280f..fbdee8fc9aa68 100644 --- a/apps/web/src/components/RightPanelTabs.tsx +++ b/apps/web/src/components/RightPanelTabs.tsx @@ -1455,7 +1455,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) { "@container/diff-toolbar flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-1", // A layout pane's row lines up with its chat's header and starts at // the pane's edge, under its notch. - notched ? "relative z-10 ps-1.5 pe-2 md:ps-0" : "pl-2", + notched ? "relative z-10 bg-background ps-1.5 pe-2 md:ps-0" : "pl-2", !notched && (props.mode === "inline" && !props.layoutControls ? "pr-28" : "pr-3"), ownsDesktopTitleBar && "drag-region", ownsDesktopTitleBar && "wco:pr-(--workspace-native-controls-inset)", @@ -1465,7 +1465,6 @@ export function RightPanelTabs(props: RightPanelTabsProps) { )} data-right-panel-tabbar data-pane-header={notched ? "" : undefined} - data-floating-pane-header={notched ? "" : undefined} > {layoutTabId !== null diff --git a/apps/web/src/components/preview/PreviewView.tsx b/apps/web/src/components/preview/PreviewView.tsx index ffd4e41b05f61..299e723f5489a 100644 --- a/apps/web/src/components/preview/PreviewView.tsx +++ b/apps/web/src/components/preview/PreviewView.tsx @@ -959,7 +959,7 @@ export function PreviewView({ return (
{pickActive && runtimeTabId && annotationVoice ? ( From 226de43251c8c1c8825b547339f40099aabeb7a4 Mon Sep 17 00:00:00 2001 From: flamboh Date: Mon, 2 Nov 2026 12:18:33 +0000 Subject: [PATCH 2/2] fix(web): side pane tab bars follow their pane body's color on every theme Co-Authored-By: Claude Opus 5.5 --- apps/web/src/components/RightPanelTabs.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx index fbdee8fc9aa68..e00bbbdae30d8 100644 --- a/apps/web/src/components/RightPanelTabs.tsx +++ b/apps/web/src/components/RightPanelTabs.tsx @@ -1028,6 +1028,12 @@ function RightPanelTab( ); } +const PANE_BODY_SURFACE_CLASS: Partial> = { + "pull-request": "bg-(--code-surface)", + file: "bg-(--code-surface)", + terminal: "bg-(--terminal-background)", +}; + export function RightPanelTabs(props: RightPanelTabsProps) { const focusedSurface = props.surfaces.find((surface) => surface.id === props.activeSurfaceId); const ownsDesktopTitleBar = isElectron && props.mode === "inline"; @@ -1455,7 +1461,12 @@ export function RightPanelTabs(props: RightPanelTabsProps) { "@container/diff-toolbar flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-1", // A layout pane's row lines up with its chat's header and starts at // the pane's edge, under its notch. - notched ? "relative z-10 bg-background ps-1.5 pe-2 md:ps-0" : "pl-2", + notched + ? cn( + "relative z-10 ps-1.5 pe-2 md:ps-0", + (focusedSurface && PANE_BODY_SURFACE_CLASS[focusedSurface.kind]) ?? "bg-background", + ) + : "pl-2", !notched && (props.mode === "inline" && !props.layoutControls ? "pr-28" : "pr-3"), ownsDesktopTitleBar && "drag-region", ownsDesktopTitleBar && "wco:pr-(--workspace-native-controls-inset)",