fix(PageHeader): keep sticky header below drawer overlays by elizabetdev · Pull Request #2394 · hyperdxio/hyperdx

elizabetdev · 2026-06-01T16:59:33Z

Summary

The sticky PageHeader (and its stickyRow) were pinned at z-index: 100, which floated them above app drawers. Drawers in this codebase don't use Mantine's default modal elevation (200) — they explicitly opt into a much lower stack via ZIndexContext (contextZIndex + 10, see DBRowSidePanel, NodeDetailsSidePanel, PodDetailsSidePanel, etc.), so a top-level drawer overlay ends up at --overlay-z-index: 10. The header would therefore poke through the drawer overlay and remain interactive while a drawer was open.

This drops both .header and .stickyRow to z-index: 2 — 8 below the top-level drawer z-index — so:

Drawer overlays (and the drawer body itself) reliably cover the sticky page chrome.
The header still wins against normal scrolling page content, which uses auto/no z-index.
Nested drawers (which keep stacking via ZIndexContext) continue to layer above their parents unchanged.

Comments in the SCSS document the relationship so the next person tweaking these values has the context.

Test plan

Open a page that uses PageHeader (e.g. Alerts, DB Service Map, Kubernetes Dashboard) and open a side panel / drawer; confirm the drawer overlay fully covers the sticky header and the header is no longer clickable through the overlay.
Scroll a long page and confirm the sticky header still sits above normal content (charts, tables, lists).
Open a nested drawer (e.g. row side panel from within another side panel) and confirm stacking still works as before.

Made with Cursor

…r overlay behavior Updated the z-index for the PageHeader and stickyRow components to 2, allowing top-level drawers to overlay correctly while maintaining the header's visibility during scrolling. This change ensures that the header floats above normal content but below the drawer overlays, improving the overall user experience.

vercel · 2026-06-01T16:59:40Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Jun 1, 2026 5:38pm
hyperdx-storybook	Ready	Preview, Comment	Jun 1, 2026 5:38pm

changeset-bot · 2026-06-01T16:59:46Z

🦋 Changeset detected

Latest commit: 8662351

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-06-01T17:00:04Z

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

Production files changed: 2
Production lines changed: 46
Branch: elizabet/page-header-z-index-below-drawers
Author: elizabetdev

To override this classification, remove the review/tier-2 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-01T17:02:14Z

E2E Test Results

✅ All tests passed • 193 passed • 3 skipped • 1306s

Status	Count
✅ Passed	193
❌ Failed	0
⚠️ Flaky	2
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

github-actions · 2026-06-01T17:05:53Z

Deep Review

Scope: packages/app/src/components/PageHeader.module.scss (.header and .stickyRow z-index: 100 → 2) + packages/app/src/components/FullscreenPanelModal.tsx (Mantine default 200 → contextZIndex + 10 with ZIndexContext.Provider propagation) + changeset.

Intent: Stop sticky page chrome from floating above the app's contextZIndex + 10 drawer overlays, and make FullscreenPanelModal play by the same ZIndexContext convention so child drawers (e.g. DBRowSidePanel opened by clicking a row in a fullscreen search tile) stack on top of the modal instead of being hidden behind it.

✅ No critical issues found.

The drawer math (contextZIndex + 10) was re-verified across every top-level consumer — DBRowSidePanel, NodeDetailsSidePanel, PodDetailsSidePanel, NamespaceDetailsSidePanel, ServiceDashboardDbQuerySidePanel, PatternSidePanel, SessionSidePanel — so a drawer opened from inside the fullscreen modal lands at modalZIndex + 10, correctly above the modal. The <ZIndexContext.Provider value={modalZIndex}> convention chosen here matches SessionSidePanel.tsx:101; DBDashboardPage's EditTileModal uses the slightly different value={modalZIndex + 10} form, but both compose correctly with consumers that re-add 10.

The "header still wins over normal scrolling content" claim holds at z-index: 2. Other small explicit z-indexes in page content (DBSearchHeatmapChart.tsx:176, TableSearchInput.tsx:196, internal TimelineChart values 1–3) all live in inner positioned/isolated stacking contexts and do not compete with the sticky header. .notSticky correctly retains z-index: auto. Mantine portals that take their default zIndex (notifications at 999999, popovers at 300, spotlights at 200001) remain comfortably above both the new modal value (10) and the new header value (2).

This revision directly addresses @brandon-pereira's flagged side-panel-under-fullscreen-tile bug; nothing remains unresolved from prior feedback.

Reviewers (7): correctness, testing, maintainability, project-standards, kieran-typescript, julik-frontend-races, previous-comments.

brandon-pereira · 2026-06-01T17:11:43Z

@elizabetdev this works good, thanks. One side note: If you have a search tile, click "Full screen" then click a row, the sidebar opens under the tile.. probably not related though.

Link

…creen tile above the modal Use the existing `ZIndexContext` pattern (`contextZIndex + 10`) for the modal itself and expose that value via `ZIndexContext.Provider`, so a DBRowSidePanel drawer opened by clicking a row inside the fullscreen search tile lands at `z-index: 20` (above the modal at `10`) instead of `z-index: 10` (hidden behind Mantine's default modal z-index of 200). Co-authored-by: Cursor <cursoragent@cursor.com>

elizabetdev · 2026-06-01T17:41:38Z

@brandon-pereira it was another z-index issue. It was fixed by 8662351.

brandon-pereira

LGTM - Thank you 🥳

## Summary The sticky `PageHeader` (and its `stickyRow`) were pinned at `z-index: 100`, which floated them above app drawers. Drawers in this codebase don't use Mantine's default `modal` elevation (200) — they explicitly opt into a much lower stack via `ZIndexContext` (`contextZIndex + 10`, see `DBRowSidePanel`, `NodeDetailsSidePanel`, `PodDetailsSidePanel`, etc.), so a top-level drawer overlay ends up at `--overlay-z-index: 10`. The header would therefore poke through the drawer overlay and remain interactive while a drawer was open. This drops both `.header` and `.stickyRow` to `z-index: 2` — 8 below the top-level drawer z-index — so: - Drawer overlays (and the drawer body itself) reliably cover the sticky page chrome. - The header still wins against normal scrolling page content, which uses `auto`/no z-index. - Nested drawers (which keep stacking via `ZIndexContext`) continue to layer above their parents unchanged. Comments in the SCSS document the relationship so the next person tweaking these values has the context. ## Test plan - [ ] Open a page that uses `PageHeader` (e.g. Alerts, DB Service Map, Kubernetes Dashboard) and open a side panel / drawer; confirm the drawer overlay fully covers the sticky header and the header is no longer clickable through the overlay. - [ ] Scroll a long page and confirm the sticky header still sits above normal content (charts, tables, lists). - [ ] Open a nested drawer (e.g. row side panel from within another side panel) and confirm stacking still works as before. Made with [Cursor](https://cursor.com)

github-actions Bot added the review/tier-2 Low risk — AI review + quick human skim label Jun 1, 2026

chore: add changeset for PageHeader z-index fix

d2e09df

Co-authored-by: Cursor <cursoragent@cursor.com>

brandon-pereira previously approved these changes Jun 1, 2026

View reviewed changes

elizabetdev dismissed brandon-pereira’s stale review via 8662351 June 1, 2026 17:34

vercel Bot deployed to Preview – hyperdx-storybook June 1, 2026 17:36 View deployment

vercel Bot deployed to Preview – hyperdx-oss June 1, 2026 17:38 View deployment

elizabetdev requested a review from brandon-pereira June 1, 2026 17:42

brandon-pereira approved these changes Jun 1, 2026

View reviewed changes

brandon-pereira added the automerge label Jun 1, 2026

kodiakhq Bot merged commit 9d71399 into main Jun 1, 2026
20 checks passed

kodiakhq Bot deleted the elizabet/page-header-z-index-below-drawers branch June 1, 2026 17:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(PageHeader): keep sticky header below drawer overlays#2394

fix(PageHeader): keep sticky header below drawer overlays#2394
kodiakhq[bot] merged 3 commits into
mainfrom
elizabet/page-header-z-index-below-drawers

elizabetdev commented Jun 1, 2026

Uh oh!

vercel Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

brandon-pereira commented Jun 1, 2026

Uh oh!

elizabetdev commented Jun 1, 2026

Uh oh!

brandon-pereira left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

elizabetdev commented Jun 1, 2026

Summary

Test plan

Uh oh!

vercel Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔵 Tier 2 — Low Risk

Uh oh!

github-actions Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Test Results

Uh oh!

github-actions Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deep Review

Uh oh!

brandon-pereira commented Jun 1, 2026

Uh oh!

elizabetdev commented Jun 1, 2026

Uh oh!

brandon-pereira left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Jun 1, 2026 •

edited

Loading

changeset-bot Bot commented Jun 1, 2026 •

edited

Loading

github-actions Bot commented Jun 1, 2026 •

edited

Loading

github-actions Bot commented Jun 1, 2026 •

edited

Loading

github-actions Bot commented Jun 1, 2026 •

edited

Loading