🐛 Fixed editor alerts positioning

[kevinansfield]

closes #26125
closes https://linear.app/ghost/issue/BER-3271/

• Alerts rendered into #ember-alerts-wormhole (body grid row 1) did not push editor content down and appeared behind the editor header because .gh-editor-fullscreen-container used position: fixed, covering the entire viewport and ignoring the grid layout
• Changed the editor fullscreen container from position: fixed to position: absolute and established a flex height chain so .gh-koenig-editor remains the sole scroll container for editor content
• Simplified the layout so each page context has one scroll container: SidebarInset for non-editor pages, .gh-koenig-editor for editor content
• Fixed the post settings sidebar to use flex column layout with a pinned header and independently scrollable content area to resolve issues on mobile
• Moved Ember CSS overrides (.gh-app position, .gh-main overflow) from the React shell into Ember source styles directly, removing redundant overrides
• Fixed mobile editor layout to fill the full viewport when the mobile navbar is hidden

[coderabbitai]

Walkthrough

The changes involve a systematic refactoring of CSS layout rules across the admin interface, removing fixed positioning and viewport-based height definitions in favor of flex-based layouts. This includes converting fixed heights (100vh, 100dvh) to flexible sizing, removing Ember-specific layout overrides, adjusting overflow behavior, and changing header positioning from fixed to sticky. The modifications affect the main editor layout, settings menu, admin layout components, and root styling, moving from static viewport-anchored dimensions to dynamic flex container-based sizing with improved scroll safety through min-height constraints.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title references the main bug fix (editor alerts positioning) which is the primary change across multiple CSS/layout files to address the positioning issue.
Description check	✅ Passed	Description clearly explains the root cause, the changes made, and addresses all file modifications including CSS overrides, layout adjustments, and flex height chains.
Linked Issues check	✅ Passed	Changes address issue #26125 by converting .gh-editor-fullscreen-container from fixed to absolute positioning and establishing proper flex height chains so alerts are visible and not obscured by editor content.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing editor alerts positioning and related layout issues. CSS modifications to index.css, admin-layout, koenig editor, settings menu, editor layouts, and main layouts all support the stated objective.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/editor-alerts-positioning

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

ghost/admin/app/styles/components/settings-menu.css (1)

130-143: position: sticky is a no-op in this context — consider removing it.

.settings-menu-pane-main has overflow: hidden, which prevents it from being a scroll container. position: sticky; top: 0 requires a scrolling ancestor to take effect; here it degrades to position: relative. The pinned-header effect is already fully achieved by the flex sibling layout (flex-shrink: 0 on the header + flex: 1; overflow-y: auto on .settings-menu-content). The sticky declaration can be removed without any visual or behavioural change.

♻️ Proposed cleanup

 .settings-menu-header {
-    position: sticky;
-    top: 0;
     display: flex;
     height: 82px;
     min-height: 82px;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ghost/admin/app/styles/components/settings-menu.css` around lines 130 - 143,
Remove the redundant sticky positioning from the header: edit the
.settings-menu-header rule and delete position: sticky and top: 0 so the header
relies on the existing flex layout (keep flex-shrink: 0, height/padding, z-index
and background intact); confirm .settings-menu-pane-main/.settings-menu-content
retain overflow-y: auto and flex: 1 to preserve the pinned-header behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ghost/admin/app/styles/components/settings-menu.css`:
- Around line 130-143: Remove the redundant sticky positioning from the header:
edit the .settings-menu-header rule and delete position: sticky and top: 0 so
the header relies on the existing flex layout (keep flex-shrink: 0,
height/padding, z-index and background intact); confirm
.settings-menu-pane-main/.settings-menu-content retain overflow-y: auto and
flex: 1 to preserve the pinned-header behavior.

[weylandswart]

Clicked around a bit more after our Tuple and everything looks solid.