xiaoxue_admin
/
orca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Jinjing 2026-07-18 22:29:26 -07:00 committed by GitHub
parent f7c2c1276c
commit 99b59ad7be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/src/components/floating-terminal/FloatingTerminalPanel.test.tsx
View File

@ -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 () => {

7
src/renderer/src/components/floating-terminal/FloatingTerminalPanel.tsx
View File

@ -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,

4
src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx
View File

@ -195,7 +195,9 @@ export function FloatingTerminalToggleButton({
return (
<FloatingTerminalIconContextMenu
currentLocation="floating-button"
className="fixed z-40"
// Why: keep the toggle/minimize control above the z-[45] panel so it stays
// clickable where the two overlap.
className="fixed z-[46]"
style={{ left: position.left, top: position.top }}
>
<Tooltip>