Skip to content

Fix popups hidden behind containers via seed + offset z-index tokens #289

Description

@aks07

Problem

The app runs two overlay stacking systems that don't agree:

  • antd overlays derive from zIndexPopupBase: 1000 — Modal/Drawer 1000, Popover 1030, Dropdown/Select 1050, Tooltip 1070.
  • @signozhq/ui portal components default to the shadcn/Tailwind scale — z-index: 50 (--dropdown-menu-content-z-index, --dropdown-menu-sub-content-z-index, --tooltip-z-index).

Any design-system popup triggered from inside an antd Drawer/Modal renders invisibly behind it. This is a recurring bug class, currently patched per-instance:

Instance Fix
periscope/components/DataViewer --dropdown-menu-content-z-index: 1000
periscope/components/PrettyView same
pages/TraceDetailsV3/.../TraceOptionsMenu z-index: 1100 on content class
MetricsExplorer/MetricDetails (tooltip) --tooltip-z-index: 1000
LogDetailedView/BodyTitleRenderer incident SigNoz/platform-pod#2452 — gear menu on body JSON keys
MetricsExplorer/MetricDetails (dashboards/alerts dropdown) found in the same audit, fixed alongside #2452

Each new dropdown/tooltip inside a drawer is a regression waiting to happen.

Proposal

Adopt antd's seed + offset token design so both systems share one scale.

Phase 1 — app-level (this repo, immediate): define the scale once in a global stylesheet; :root vars inherit into body-mounted portals:

:root {
	--z-popup-base: 1000; // mirrors antd zIndexPopupBase

	--dropdown-menu-content-z-index: calc(var(--z-popup-base) + 50);
	--dropdown-menu-sub-content-z-index: calc(var(--z-popup-base) + 50);
	--tooltip-z-index: calc(var(--z-popup-base) + 70);
}

Then delete the per-instance overrides listed above (cleanup pass).

Phase 2 — design-system (periscope): bake the seed into the package defaults, e.g. z-index: var(--dropdown-menu-content-z-index, calc(var(--periscope-z-popup-base, 1000) + 50)), and close the gaps that can't be fixed from the app:

  • dialog hardcodes z-index: 50 (no var hook)
  • select / popover / combobox content has no z-index at all — also loses to a drawer

Consumers then get antd-compatible stacking out of the box, with a single re-seed knob.

Refs

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions