| author |  Igor Makowski <56691628+Mnigos@users.noreply.github.com> 2026-10-02 05:33:36+02:00 |
| committer |  GitHub <noreply@github.com> 2026-10-02 00:33:36-03:00 |
| log | 20012ebd80b06a4c10ab0e78893822e7f873b2a8 |
| tree | b920cfdb920a1c076d8ace7357bba1b55e832d0f |
| parent | fa6262db3107a4c95b6ff611113e6fa0753e5948 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): keep the terminal toggle clear of the last header action (#13426)
2 files changed, 11 insertions(+), 4 deletions(-)
apps
web
src
components
apps/web/src/components/ChatView.tsx+6-1
| ... | @@ -9516,7 +9516,12 @@ export default function ChatView(props: ChatViewProps) { | ... | @@ -9516,7 +9516,12 @@ export default function ChatView(props: ChatViewProps) { |
| 9516 | "flex shrink-0", | 9516 | "flex shrink-0", |
| 9517 | panelAnimationsActive && | 9517 | panelAnimationsActive && |
| 9518 | "motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out", | 9518 | "motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out", |
| 9519 | rightPanelOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", | 9519 | // Closed, the control leaves the flex flow so the cluster is only as wide as the two |
| 9520 | // toggles the header reserves room for; anchored to the cluster's left edge, it fades | ||
| 9521 | // out where it stood rather than over the terminal toggle. | ||
| 9522 | rightPanelOpen | ||
| 9523 | ? "pointer-events-auto opacity-100" | ||
| 9524 | : "pointer-events-none absolute right-full mr-1 opacity-0", | ||
| 9520 | )} | 9525 | )} |
| 9521 | inert={!rightPanelOpen} | 9526 | inert={!rightPanelOpen} |
| 9522 | > | 9527 | > |
apps/web/src/components/chat/ChatHeader.tsx+5-3
| ... | @@ -492,9 +492,11 @@ export const ChatHeader = memo(function ChatHeader({ | ... | @@ -492,9 +492,11 @@ export const ChatHeader = memo(function ChatHeader({ |
| 492 | data-chat-header-actions | 492 | data-chat-header-actions |
| 493 | className={cn( | 493 | className={cn( |
| 494 | "flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3", | 494 | "flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3", |
| 495 | // Reserve two panel toggles plus their 4px gaps and 1px edge inset. | 495 | // Reserve two panel toggles (32px, 28px at sm) with their 4px gap and 1px edge inset, |
| 496 | // The page header adds 8px more right padding at sm. | 496 | // plus the same gap the actions keep between themselves (gap-2, gap-3 at @3xl) so the |
| 497 | rightPanelOpen ? "pr-0" : "pr-18.25 sm:pr-14.25", | 497 | // terminal toggle does not sit against the last action. The page header adds 8px more |
| 498 | // right padding at sm. | ||
| 499 | rightPanelOpen ? "pr-0" : "pr-19.25 sm:pr-15.25 @3xl/header-actions:pr-16.25", | ||
| 498 | "[[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", | 500 | "[[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", |
| 499 | )} | 501 | )} |
| 500 | > | 502 | > |