Improved spacing of the publish page on small screens

[lorumic]

fixes #24898

This PR improves the right spacing of the publish page header, by making it proportional to the left one. It also ensures that the "Back to settings" secondary CTA does not overflow horizontally on very narrow viewports.

• Before

• After

[cursor]

You have run out of free Bugbot PR reviews for this billing cycle. This will reset on November 3.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[coderabbitai]

Walkthrough

This pull request modifies the publishmenu.css file to address spacing issues on narrow viewports. The changes include consolidating the padding declaration for .gh-publish-header to explicitly set padding: 0 15px; for viewports under 1024px width, and changing the .gh-publish-cta width from max-content to 100%. These CSS-only modifications improve button spacing and layout behavior on mobile devices and narrow browser windows.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Reasoning: This change affects only a single CSS file with two straightforward property modifications. Both edits are simple value replacements (padding consolidation and width adjustment) with no logic changes or complex interactions. The changes follow a consistent pattern addressing the same viewport issue, making this homogeneous and low-complexity. Visual verification on narrow viewports would be the primary review concern.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "Improved spacing of the publish page on small screens" is concise, clear, and directly captures the primary objective of the changeset. It accurately summarizes the main focus on fixing spacing issues related to the publish page on narrow viewports, which aligns with both the code changes (CSS modifications to padding and width properties) and the PR description explaining the fixes for the "Preview" button and "Back to settings" button spacing.
Linked Issues Check	✅ Passed	The code changes directly address both requirements from linked issue #24898 [#24898]. The modification to .gh-publish-header padding declarations under max-width: 1024px addresses the missing inline end padding on the "Preview" button for viewports smaller than 1024px. The replacement of width: max-content; with width: 100%; on .gh-publish-cta addresses the horizontal overflow issue of the "Back to settings" button on very narrow viewports. Both CSS modifications are focused, targeted fixes that align with the issue's stated objectives to maintain consistent spacing on narrow viewports.
Out of Scope Changes Check	✅ Passed	All code changes in this pull request are within scope and directly related to the objectives outlined in linked issue #24898. The modifications are exclusively CSS styling adjustments to publishmenu.css targeting the specific spacing problems identified: padding adjustments for .gh-publish-header and width adjustments for .gh-publish-cta. No extraneous changes, refactoring, or unrelated modifications are present in the changeset.
Description Check	✅ Passed	The pull request description is clearly related to the changeset and provides meaningful context. It references the linked issue #24898, explains the specific problems being addressed (right-side spacing proportional to left-side, and preventing horizontal overflow of the "Back to settings" button), and includes before/after screenshots to illustrate the improvements. The description effectively communicates both the rationale and visual outcome of the changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 635e3dc and 3dee628.

📒 Files selected for processing (1)

• ghost/admin/app/styles/components/publishmenu.css (2 hunks)

🔇 Additional comments (2)

ghost/admin/app/styles/components/publishmenu.css (2)

227-238: Add horizontal padding to header on narrow viewports—LGTM.

The added padding: 0 15px; on line 234 provides the missing inline end padding for the publish header on viewports under 1024px, directly addressing the reported spacing issue. The padding reset of margin: 0; keeps the layout tight while the horizontal padding adds the needed breathing room at the viewport edges.

---

649-653: Constrain CTA container width to prevent secondary button overflow—LGTM.

Changing .gh-publish-cta from width: max-content; to width: 100%; allows the flex container to properly constrain its children on narrow viewports. Since .gh-publish-cta-secondary already has overflow: hidden; and text-overflow: ellipsis; (line 709-718), and the secondary CTA is hidden when a primary button is present (line 691-693), this should prevent the "Back to settings" button from overflowing horizontally on very narrow screens.

Please verify the visual appearance on actual mobile devices and narrow viewports to confirm the spacing and button layout look correct, especially the secondary CTA text truncation on screens narrower than ~375px.

---

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.}

[joeldesante]

@lorumic
Wouldn't it be better to drop that secondary button in the CTA below the primary button so that they are stacked vertically after hitting the mobile break point.

I cant see any reason the user would want the button to trail off like it has in the example above.

[lorumic]

Wouldn't it be better to drop that secondary button in the CTA below the primary button so that they are stacked vertically after hitting the mobile break point.

Yes, I agree, that would be better and was also one of the other things that I had tried while I was implementing the change. I think the final decision is up to the Ghost team, as it's a UX one - if it's confirmed that what we want here is wrapping, I'll be happy to address this change. :)

[9larsons]

Hey, added some tweaks! Thanks for this. I can't say I'm ever on mobile, so we appreciate those who use mobile heavily to suggest these. I've added some wrapping and fixed the "Publish" text falling behind the modal header at the same time. It's all related enough.

edit: We're in the process of moving all this to React+Tailwind which should make the mobile behavior a lot friendlier.