Z-Index Stacking#

Blinko has no shared z-index constants file. Values are hardcoded independently across Tailwind utility classes (z-[N]), inline style props, and CSS rules, creating an implicit layering hierarchy that is prone to stacking order bugs when new overlays are introduced 1.

De Facto Layer Hierarchy#

1

Key Components#

FullscreenEditor (z-[9999])#

FullscreenEditor.tsx renders a full-viewport div at z-[9999] via createPortal to document.body 2 3. It explicitly checks for a .PhotoView-Portal element to yield ESC key handling to the image viewer above it 4.

Dialog & DialogStandalone Providers (z-2000–2002)#

Two near-identical providers — Dialog/Provider.tsx and DialogStandalone/Provider.tsx — both override HeroUI's <Modal> with style={{ zIndex: 2000 }}. On iOS they bypass HeroUI entirely, using plain div overlays at z-[2000], a motion container at z-[2001], and a close button at z-[2002] 1.

PopoverFloat (z-3000 / z--99)#

PopoverFloat/index.tsx uses Framer Motion to animate between zIndex: 3000 (visible) and zIndex: -99 (hidden). At 3000 it sits above dialogs — intentional for tag/reference dropdowns inside modals — but can conflict if open while the fullscreen editor is launching 1.

Known Bugs & Root Causes#

Reference modal trapped behind FullscreenEditor#

Opening a note in fullscreen and then clicking the Reference button yields no visible modal 5. The root cause is a stacking context mismatch:

• FullscreenEditor sets z-index: 9999 on its portal root.
• HeroUI's <Modal> portal wrapper defaults to z-index: 50 on its outermost div; even though the inner <section> targets z-index: 2000, the entire stacking context is capped at 50 — placing the modal beneath the fullscreen overlay 5.

The issue reporter also noted an intermittent dnd-kit crash (TypeError: Cannot use 'in' operator to search for 'x' in undefined) thrown during modal mounting, caused by a missing null check in dnd-kit's coordinate delta helper 5.

Suggested fixes (from the issue):

1. Lower FullscreenEditor to z-40 so it stays below HeroUI's z-50 modal wrapper.
2. Or raise the HeroUI modal portal container above 9999 (e.g., z-[10000]).

Root Structural Problem: No Shared Constants#

There is no zIndex constants file 1. Consequences:

• The same logical levels (2000, 2001, 2002) are duplicated independently in both Dialog/Provider.tsx and DialogStandalone/Provider.tsx.
• HeroUI <Modal> has its own internal stacking; the style={{ zIndex: 2000 }} override is a workaround rather than a contract.
• Any third-party component defaulting to a value between 50 and 2000 would silently break the layering.
• Adding a new overlay requires manually auditing all existing values scattered across CSS files, Tailwind classes, and inline styles.

Source Files at a Glance#