🐛 Fixed admin sidebar hidden behind legacy screens on mobile

[betschki]

On mobile, opening the sidebar from a legacy Ember screen (e.g. the billing/Ghost(Pro) screen) appeared to do nothing — the sidebar drawer opened in the DOM but was painted behind the screen content.

Legacy Ember screens use very high z-index values (the billing overlay is z-index: 9999) and none of the Ember host's ancestors establish a stacking context, so those z-indexes compete in the root stacking context and paint over the React shell's mobile sidebar drawer (z-50), which is portalled to .

Isolating #ember-app into its own stacking context keeps those legacy z-indexes scoped to the Ember content region, so the shell's sidebar drawer renders above it as expected. Fullscreen Ember screens are unaffected — they hide the sidebar via sidebar visibility, not z-index.

Got some code for us? Awesome 🎊!

Please take a minute to explain the change you're making:

• Why are you making it?
• What does it do?
• Why is this something Ghost users or developers need?

Please check your PR against these items:

• I've read and followed the Contributor Guide
• I've explained my change
• I've written an automated test to prove my change works

We appreciate your contribution! 🙏

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 794d6f16-0e48-400f-9fbf-f96716d15d32

📥 Commits

Reviewing files that changed from the base of the PR and between d9e9681 and 44916b1.

📒 Files selected for processing (1)

• apps/admin/src/index.css

---

Walkthrough

In apps/admin/src/index.css, the body.react-admin #ember-app`` rule receives a new isolation: isolate declaration. A comment explains this creates a separate stacking context to prevent legacy Ember z-index values from painting over React shell chrome such as the mobile sidebar drawer.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the mobile admin sidebar layering fix on legacy screens.
Description check	✅ Passed	The description is directly about the same stacking-context bug and the Ember app isolation fix.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[9larsons]

Good find, thanks for this!

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit 44916b1

Command	Status	Duration	Result
nx run-many --target=build --projects=tag:publi...	✅ Succeeded	1s	View ↗
nx run-many -t test:unit -p @tryghost/admin	✅ Succeeded	1m 31s	View ↗
nx run @tryghost/admin:build	✅ Succeeded	1m 13s	View ↗
nx run-many -t lint -p @tryghost/admin	✅ Succeeded	15s	View ↗
nx run ghost:build:assets	✅ Succeeded	2s	View ↗
nx run ghost:build:tsc	✅ Succeeded	6s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-01 14:52:00 UTC