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
Problem
The app runs two overlay stacking systems that don't agree:
zIndexPopupBase: 1000— Modal/Drawer 1000, Popover 1030, Dropdown/Select 1050, Tooltip 1070.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:
periscope/components/DataViewer--dropdown-menu-content-z-index: 1000periscope/components/PrettyViewpages/TraceDetailsV3/.../TraceOptionsMenuz-index: 1100on content classMetricsExplorer/MetricDetails(tooltip)--tooltip-z-index: 1000LogDetailedView/BodyTitleRendererMetricsExplorer/MetricDetails(dashboards/alerts dropdown)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;
:rootvars inherit into body-mounted portals: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:dialoghardcodesz-index: 50(no var hook)select/popover/comboboxcontent has no z-index at all — also loses to a drawerConsumers then get antd-compatible stacking out of the box, with a single re-seed knob.
Refs
zIndexBase: 0,zIndexPopupBase: 1000(antd/lib/theme/themes/seed.js)