From 7f8fe3928f83840ba7da458d8259a1f0fcb10f4a Mon Sep 17 00:00:00 2001 From: Mnigos Date: Thu, 24 Sep 2026 15:33:37 +0200 Subject: [PATCH] fix(web): keep the terminal toggle clear of the last header action The closed right-panel maximize control stayed a flex item of the titlebar cluster, so the terminal toggle sat against "Commit, push & PR" and its tooltip painted across that button. The control now leaves the flow while closed, and the header reserves the two toggles plus the same gap the actions keep between themselves. --- apps/web/src/components/ChatView.tsx | 7 ++++++- apps/web/src/components/chat/ChatHeader.tsx | 8 +++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index e5eb815ec9cb..c146efb9c608 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -9589,7 +9589,12 @@ export default function ChatView(props: ChatViewProps) { "flex shrink-0", panelAnimationsActive && "motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out", - rightPanelOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", + // Closed, the control leaves the flex flow so the cluster is only as wide as the two + // toggles the header reserves room for; anchored to the cluster's left edge, it fades + // out where it stood rather than over the terminal toggle. + rightPanelOpen + ? "pointer-events-auto opacity-100" + : "pointer-events-none absolute right-full mr-1 opacity-0", )} inert={!rightPanelOpen} > diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx index bbe014ddbd06..92f615538f2d 100644 --- a/apps/web/src/components/chat/ChatHeader.tsx +++ b/apps/web/src/components/chat/ChatHeader.tsx @@ -492,9 +492,11 @@ export const ChatHeader = memo(function ChatHeader({ data-chat-header-actions className={cn( "flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3", - // Reserve two panel toggles plus their 4px gaps and 1px edge inset. - // The page header adds 8px more right padding at sm. - rightPanelOpen ? "pr-0" : "pr-18.25 sm:pr-14.25", + // Reserve two panel toggles (32px, 28px at sm) with their 4px gap and 1px edge inset, + // plus the same gap the actions keep between themselves (gap-2, gap-3 at @3xl) so the + // terminal toggle does not sit against the last action. The page header adds 8px more + // right padding at sm. + rightPanelOpen ? "pr-0" : "pr-19.25 sm:pr-15.25 @3xl/header-actions:pr-16.25", "[[data-panel-animations=true]_&]:motion-safe:transition-[padding-right] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-out", )} >