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:
@@ -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,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { zIndices } from '../../styles/zIndex';
|
||||
import {
|
||||
animSeasonFall,
|
||||
animLeafFall,
|
||||
@@ -758,7 +759,7 @@ function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: bool
|
||||
pointerEvents: 'none',
|
||||
// Below the Night Light overlay (9998) so seasonal particles are tinted
|
||||
// by it, and below modals (9999) so dialogs are never obscured.
|
||||
zIndex: 9997,
|
||||
zIndex: zIndices.seasonalEffect,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user