Refactor CSS for publish menu responsiveness and style#25033
Refactor CSS for publish menu responsiveness and style#25033Raj4478 wants to merge 6 commits intoTryGhost:mainfrom
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThe PR updates ghost/admin/app/styles/components/publishmenu.css with whitespace and formatting normalizations (selector/combinator spacing, animation timing syntax, rgba/spacing consistency). It adds small layout adjustments: Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ghost/admin/app/styles/components/publishmenu.css (1)
142-149: Invalid calc() syntax — missing spaces around “-”.
calc(50%-9px)is invalid; browsers require spaces around-, so the declaration is ignored.- top: calc(50%-9px); + top: calc(50% - 9px);
🧹 Nitpick comments (4)
ghost/admin/app/styles/components/publishmenu.css (4)
965-971: Long-word wrapping: preferoverflow-wrap:anywhere; dropoverflow:auto.
overflow:autorisks scrollbars. Use standard wrapping with hyphenation for unbroken titles.-.modal-post-success .modal-body h2 { - overflow: auto ; - word-wrap: break-word; - word-break: break-word ; - max-width: 100% ; -} +.modal-post-success .modal-body h2 { + overflow-wrap: anywhere; /* modern, handles single long words */ + word-wrap: break-word; /* legacy alias/fallback */ + word-break: break-word; /* WebKit/Blink fallback */ + hyphens: auto; /* allow hyphenation when possible */ +}
664-671: Tokenize the green gradient; avoid!importantif possible.Hard-coded hexes and
!importantreduce theming/override flexibility. Prefer design tokens and normal specificity.-.gh-publish-cta .gh-btn-pulse { - fill: #fff; - background: linear-gradient(90deg, #4dd831, #1DC32E); +.gh-publish-cta .gh-btn-pulse { + fill: #fff; + background: linear-gradient(90deg, var(--green), var(--green-d1)); color: #fff; font-weight: 500; box-shadow: 0 0 0 0 rgba(48, 207, 67, 1); animation: pulse-green 2s infinite; } -.gh-publish-cta .gh-btn-green, -.gh-publish-cta .gh-btn-green:hover, -.gh-publish-cta .gh-btn-green:active { - background: linear-gradient(90deg, #4dd831, #1DC32E) !important; +.gh-publish-cta .gh-btn-green, +.gh-publish-cta .gh-btn-green:hover, +.gh-publish-cta .gh-btn-green:active { + background: linear-gradient(90deg, var(--green), var(--green-d1)); }Please confirm if
!importantis required to beat inline styles or higher specificity. If so, consider raising specificity locally instead.Also applies to: 690-697
835-847: Clamp enhancement looks good; add hyphenation for edge cases.Unprefixed
line-clamp+-webkit-line-clampcovers modern engines. Addhyphens:autoto improve long-token breaks..gh-post-bookmark-title { @@ - line-height: 1.4em; - line-clamp: 2; + line-height: 1.4em; + line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + hyphens: auto; }
1118-1121: Avoid!importanton mobile button width.Try container/selector specificity instead of
!importantto keep styles composable.- width: 100% !important; + width: 100%;If
!importantis needed to override inline/button utility classes, consider a more specific selector (e.g.,.modal-post-success .modal-footer .copy-link.gh-btn).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
ghost/admin/app/styles/components/publishmenu.css(19 hunks)
🔇 Additional comments (3)
ghost/admin/app/styles/components/publishmenu.css (3)
696-698: Secondary CTA hidden when primary present — confirm UX.
display:noneon.gh-publish-cta-secondarywhen adjacent to.gh-btn-greenremoves helpful context/links in some flows. Intentional?
36-38: Dropdown width set to 100% — sanity-check narrow layouts.Expanding
.ember-basic-dropdownto full width inside.gh-date-time-pickercan overflow in constrained flex/ grid parents. Please verify on <=320px and within side panels.
563-570: Checked state sizing adjustments look consistent.Padding/line-height updates compensate for 2px border; no jump observed. LGTM.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
ghost/admin/app/styles/components/publishmenu.css (1)
965-969: Useoverflow-wrapinstead of the non-standardword-break
word-break: break-wordis a legacy WebKit extension and is ignored in Firefox. Switch to the standardoverflow-wrap(plus the existing alias for older engines) so the fix works consistently across browsers..modal-post-success .modal-body h2 { - word-wrap: break-word; - word-break: break-word ; - max-width: 100% ; + overflow-wrap: anywhere; + word-wrap: break-word; /* legacy alias */ + max-width: 100%; }
1 participant
When we publish our post and if the title is is Single word and long such as (pneumonoultramicroscopicsilicovolcanoconiosis) the title gets out or the card because there was no css to handle the title (mainly the overflow css)
After adding the css for this it looks like this
Note
Adds word-wrapping to long titles in the publish success modal and adjusts mobile/header spacing; includes minor style cleanups.
.modal-post-success .modal-body h2) to prevent overflow.padding-rightto.gh-publish-headerat<=1024pxandmargin-rightto.gh-publish-header .mobileat<=500px..gh-post-bookmark-titleline-heightandline-clampinto separate declarations.publishmenu.css.Written by Cursor Bugbot for commit d4d56f0. This will update automatically on new commits. Configure here.