refactor(ui): name the global overlay z-index layers (native-cinny nit)

Centralized the global floating-UI stacking values into styles/zIndex.ts
(inCallBanner 9990 < seasonalEffect 9997 < nightLight 9998 < toast 10001;
folds modals sit at 9999 between). Same values, no behavior change — just
removes the magic numbers and documents the layering so future overlays don't
collide. Component-internal small z-index stays local.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-29 16:10:29 -04:00
parent 2c3dba55e6
commit 2d71f2ce30
5 changed files with 24 additions and 4 deletions
+2 -1
View File
@@ -64,6 +64,7 @@ import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
import { useLivekitSupport } from '../hooks/useLivekitSupport';
import { CallAvatarAnimation } from '../styles/Animations.css';
import { webRTCSupported } from '../utils/rtc';
import { zIndices } from '../styles/zIndex';
const PIP_MIN_W = 200;
const PIP_MIN_H = 112;
@@ -323,7 +324,7 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
position: 'fixed',
top: config.space.S400,
right: config.space.S400,
zIndex: 9990,
zIndex: zIndices.inCallBanner,
width: toRem(300),
maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
padding: config.space.S300,