ECHOES-1309 Fix sticky PageHeader goes under PageContent elements with z-index or new stacking context

[gregaubert]

Before:

After:

Part of

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	9a4eaa3
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/69fde24123980e00085651d7
😎 Deploy Preview	https://deploy-preview-685--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1309

[sonar-review-alpha]

Summary

This PR fixes a stacking context issue where the sticky PageHeader could be obscured by PageContent elements with high z-index values or that create new stacking contexts (like transforms).

The fix applies two complementary strategies:

1. PageHeader: Adds z-index: 1 to the sticky positioned header (both collapse and sticky modes) to ensure it renders above content
2. PageContent: Adds isolation: isolate to create a contained stacking context, preventing child z-index values from escaping and competing with the header

The story adds test components demonstrating the edge cases: high z-index boxes, isolated elements, transforms, and portaled dropdowns. These visual tests help verify the fix works across different stacking context scenarios.

What reviewers should know

Review focus:

• The core fix is minimal and surgical: three lines changed across two layout components, plus a z-index value comment
• isolation: isolate is the key architectural change—it's a CSS best practice for containing stacking contexts and is safe to apply at the PageContent level
• The z-index value (1) is intentionally low since PageContent is isolated and can't escape above it

Testing notes:

• The Storybook additions showcase edge cases: HighZIndexBox (z-index: 9999), IsolatedBox (nested isolation), TransformBox (creates stacking context), and a DropdownMenu (portaled component)
• These visual tests verify the fix handles both explicit z-index and implicit stacking context creation from CSS properties like transform
• No unit test changes—this is primarily a visual/rendering fix best verified in Storybook or E2E tests

Things to verify in preview:

• Sticky header remains on top when scrolling through content with high z-index elements
• Portaled components (like dropdowns) still render correctly above the page
• Existing layouts without these edge cases are unaffected

---

• Generate Walkthrough
• Generate Diagram

🗣️ Give feedback

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarQube

[sonar-review-alpha]

LGTM! ✅

🗣️ Give feedback