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:
@@ -4,6 +4,7 @@ import { color, config, Icon, IconButton, Icons } from 'folds';
|
||||
import { toastQueueAtom, dismissToastAtom, ToastNotif } from '../../state/toast';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { zIndices } from '../../styles/zIndex';
|
||||
|
||||
// Inject the keyframe animation once
|
||||
const STYLE_ID = 'lotus-toast-keyframes';
|
||||
@@ -214,7 +215,7 @@ export function LotusToastContainer() {
|
||||
position: 'fixed',
|
||||
bottom: '1.5rem',
|
||||
right: '1.5rem',
|
||||
zIndex: 10001,
|
||||
zIndex: zIndices.toast,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S200,
|
||||
|
||||
Reference in New Issue
Block a user