🎨 Allow longer strings in user dropdown menu

[sim0nlind]

This PR makes it possible for longer strings in the user account dropdown that appears from the sidebar in Ghost Admin. The string width was capped at 188px and this PR updates it to 100%.

Before

After

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

---

This is my first OS contribution ever :).

[coderabbitai]

Walkthrough

Updated CSS in ghost/admin/app/styles/layouts/main.css changing the width of two selectors. The .gh-user-name and .gh-user-email rules were modified from a fixed width of 188px to a flexible width of 100%, changing how these elements fill horizontal space within their container.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

• Single file, two property changes
• Homogeneous CSS edits (width from 188px to 100%)
• No new selectors, no structural/layout rule additions

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly and accurately describes the main change in the pull request by highlighting that longer strings are now allowed in the user dropdown menu, directly reflecting the CSS update from a fixed to a flexible width.
Description Check	✅ Passed	The pull request description clearly outlines the change to the CSS width cap from 188px to 100%, includes before-and-after screenshots demonstrating the visual impact, and relates directly to the adjustments made in the summary.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

📜 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 8f39c20 and 1e1451b.

📒 Files selected for processing (1)

• ghost/admin/app/styles/layouts/main.css (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• ghost/admin/app/styles/layouts/main.css

✨ Finishing Touches

🧪 Generate unit tests

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

---

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]

Actionable comments posted: 0

🧹 Nitpick comments (2)

ghost/admin/app/styles/layouts/main.css (2)

368-378: Avoid overlap with the absolute-positioned sign-out button; improve wrapping semantics

Setting width: 100% risks text flowing underneath the .user-menu-signout button (absolute at right:12px). Also, word-break: break-all hurts readability (especially for emails and CJK). Recommend reserving space for the button and using friendlier wrapping.

Apply this diff within the .gh-user-name block:

 .gh-user-name {
     display: inline-block;
-    width: 100%;
+    /* Reserve space for the sign-out button; adjust if its hit-area changes */
+    width: calc(100% - 56px);
     margin: 1px 0 0;
     padding: 0;
-    word-break: break-all;
+    /* Prefer readable breaking for long names/usernames */
+    overflow-wrap: anywhere;
+    word-break: break-word; /* fallback */
+    hyphens: auto;
     font-size: 1.5rem;
     letter-spacing: 0;
     font-weight: 500;
     line-height: 1;
 }

Verification checklist:

• Open the account menu with a very long unbroken username and confirm there’s no overlap with the sign-out control at different zoom levels and breakpoints (>=1240px, 801-1239px, <=800px).
• Check LTR and RTL locales.
• Ensure the dropdown positioning (top: -324px on the menu) still looks correct when the header increases in height.

---

380-390: Same concern for email; prefer readable wrapping and reserve space for actions

Emails broken “anywhere” are hard to read; also protect against overlap with the sign-out button like above.

Apply this diff within the .gh-user-email block:

 .gh-user-email {
     display: inline-block;
-    width: 100%;
+    width: calc(100% - 56px);
     margin: 0;
     padding: 0;
-    word-break: break-all;
+    /* Preserve legibility for long email addresses */
+    overflow-wrap: anywhere;
+    word-break: break-word; /* fallback */
+    hyphens: auto;
     font-size: 1.3rem;
     font-weight: 400;
     line-height: 1;
     color: var(--middarkgrey);
 }

Optional follow-up (if you prefer to keep width: 100%): add right padding on the containing .gh-user-info instead to make room for the button:

/* In .gh-account-menu-header .gh-user-info */
padding-right: 56px;

Please verify visually with extreme-length emails (e.g., 120+ chars, long TLDs) across browsers (Chrome, Firefox, Safari).

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between de8d4c2 and 8f39c20.

📒 Files selected for processing (1)

• ghost/admin/app/styles/layouts/main.css (2 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: kevinansfield
PR: TryGhost/Ghost#23824
File: ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs:919-926
Timestamp: 2025-06-13T11:57:58.226Z
Learning: In `ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs`, some style blocks (e.g., `.latest-post p` and `.latest-post p a`) still use the legacy colour `#73818c` on purpose; they are later overridden by `emailCustomization` feature rules, as noted by inline TODO comments. These occurrences should not be flagged as inconsistencies.