From 99b59ad7be076c88335093ddd782df6de67d8a5e Mon Sep 17 00:00:00 2001 From: Jinjing <6427696+AmethystLiang@users.noreply.github.com> Date: Sat, 18 Jul 2026 22:29:26 -0700 Subject: [PATCH] fix(floating-terminal): position panel at z-45 above notifications (#9420) Raise the floating terminal panel from z-30 to z-45 so it sits above notification cards (z-40) but below the modal layer (z-50), preventing notifications from burying the terminal. Raise the toggle button to z-46 to keep it clickable where it overlaps the panel. --- .../floating-terminal/FloatingTerminalPanel.test.tsx | 4 ++-- .../components/floating-terminal/FloatingTerminalPanel.tsx | 7 ++++--- .../floating-terminal/FloatingTerminalToggleButton.tsx | 4 +++- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.test.tsx b/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.test.tsx index a29c76f1d..cf2747620 100644 --- a/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.test.tsx +++ b/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.test.tsx @@ -800,10 +800,10 @@ describe('FloatingTerminalPanel close behavior', () => { expect(getPanelStyleBounds(element)).toEqual(savedBounds) }) - it('layers below root notification cards', async () => { + it('layers above root notification cards but below the modal layer', async () => { const element = await renderPanel(true) - expect(getPanelClassName(element)).toContain('z-30') + expect(getPanelClassName(element)).toContain('z-[45]') }) it('refreshes terminal native input focus when the floating panel opens', async () => { diff --git a/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.tsx b/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.tsx index c5b509264..b391bf4a4 100644 --- a/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.tsx +++ b/src/renderer/src/components/floating-terminal/FloatingTerminalPanel.tsx @@ -1453,8 +1453,9 @@ export function FloatingTerminalPanel({ }, []) return ( - // Why: root notification cards use z-40; keep the floating workspace below - // them so alerts are never hidden behind an open terminal panel. + // Why: sit above the z-40 notification cards so the floating workspace is + // never buried behind them, but stay under the z-50 modal layer so its own + // orchestration/save dialogs (and every app modal) still open above it. // Drop shadow on the outer shell, border on an inner shell — mixing both on // one rounded node made corners look stubby. Floating tabs skip their top // border so the titlebar curve stays clean. @@ -1463,7 +1464,7 @@ export function FloatingTerminalPanel({ data-floating-terminal-panel aria-hidden={!open} tabIndex={-1} - className={`fixed z-30 flex min-h-[280px] min-w-[420px] rounded-lg bg-transparent text-card-foreground shadow-[0_4px_12px_rgba(0,0,0,0.16),0_24px_64px_rgba(0,0,0,0.32)] outline-none dark:shadow-[0_8px_20px_rgba(0,0,0,0.35),0_28px_72px_rgba(0,0,0,0.58)] ${open ? 'opacity-100' : 'invisible pointer-events-none opacity-0'}`} + className={`fixed z-[45] flex min-h-[280px] min-w-[420px] rounded-lg bg-transparent text-card-foreground shadow-[0_4px_12px_rgba(0,0,0,0.16),0_24px_64px_rgba(0,0,0,0.32)] outline-none dark:shadow-[0_8px_20px_rgba(0,0,0,0.35),0_28px_72px_rgba(0,0,0,0.58)] ${open ? 'opacity-100' : 'invisible pointer-events-none opacity-0'}`} style={{ visibility: open ? 'visible' : 'hidden', left: bounds.left, diff --git a/src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx b/src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx index 285ff0377..87d3c1cc4 100644 --- a/src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx +++ b/src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx @@ -195,7 +195,9 @@ export function FloatingTerminalToggleButton({ return (