peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(z-index): name the stacking layers as a token scale

Browse Source 
Replace ~48 magic z-index values (z-10..z-[9999] + 2 inline zIndex) with named
tailwind zIndex tokens (base/menu/chrome/paneltab/panel/rail/overlay/popover/
tooltip/tuner). Values are UNCHANGED — a rename, not a renumber — so layering is
identical; the names give one source of truth for the stack.
This commit is contained in:
peter
2026-07-18 19:11:25 +02:00
parent 7039abc4d3
commit c91caffa5e
26 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/DraftSaveBar.tsx
+2 -2
View File
@@ -37,11 +37,11 @@ export function DraftSaveBar({
const saving = state === "saving";
const floating = variant === "floating";
const wrap = floating
? "fixed bottom-4 left-1/2 -translate-x-1/2 z-40 glass rounded-2xl shadow-lg flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]"
? "fixed bottom-4 left-1/2 -translate-x-1/2 z-rail glass rounded-2xl shadow-lg flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]"
: "flex items-center justify-between gap-3 border-t border-border/60 px-4 py-3 bg-card/40";
// The floating variant is fixed to the viewport but renders from a page inside the page
// scroller, so it goes to <body> — otherwise the scroller's stacking context (its edge-fade
// mask) scopes this z-40 and fades the bar's bottom edge. The inline variant is in normal flow
// mask) scopes this z-rail and fades the bar's bottom edge. The inline variant is in normal flow
// and stays put.
const bar = (
<div data-testid="draft-save-bar" className={wrap}>