fix(shell): the dashboard switcher opens above the app navigation, not behind it

[rubenvdlinde]

What

The dashboard switcher has been unreachable since #551 adopted the shared shell. 58 e2e tests across eleven specs fail as locator.click timing out, and all 240 interception lines in that run name the same element: [data-testid="cn-nav"] .app-navigation. The panel slides out, it is visible, and every click on it lands on the navigation instead.

Why the z-index was not the fix

This is a stacking context. The sidebar is position: fixed, which escapes the scroll flow but not the stacking context.

Until #551 this view was the page, so there was no context to escape and nothing else claimed the left 280px. Now it renders inside #app-content, a sibling of .app-navigation, and NcAppNavigation carries z-index: 1400 on itself. A sibling with a z-index paints above the whole of a sibling subtree whose own z-index is auto, so the sidebar's 1500 could never win: it was competing inside a box that had already lost.

Raising the number again would have changed nothing. That is worth saying, because it is the obvious first move.

What changes

• The sidebar and its backdrop are teleported to body, making them siblings of the navigation rather than descendants of the content. That is the only place their z-index means what it says.
• The backdrop goes from 999 to 1450. At 999 the navigation painted over it even once teleported, so a click meant to dismiss the sidebar navigated instead. 1450 is above the navigation and below the sidebar it sits behind.
• Both numbers carry a comment saying what they are above and why the Teleport is what makes them work.

Verification

Local, because the E2E leg only runs on the development push:

• 682 unit tests pass (63 files)
• webpack production build clean
• eslint and prettier clean

The proof is the next development push run.

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/launchpad @ a713bd4

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-manifest		✅
format		✅
check-schema-l10n		✅
composer			✅	✅ 104/104
npm			✅	✅ 527/527
app:check-code	⏭️
info.xml	✅
REUSE	❌
PHPUnit					✅
Newman					✅
Playwright					⏭️ deferred — runs on the promotion into beta/main, not on a pull request into development
Hydra gates					✅

---

Quality workflow — 2026-09-05 18:12 UTC

Download the full PDF report from the workflow artifacts.