Fix share button text wrapping on mobile

[bst1n]

Problem

On narrow viewports (mobile), the Share button's label can wrap mid-word inside the .gh-meta-share flex container.

In post.hbs, the .gh-meta-share container is display: flex; justify-content: space-between; with the author/date/reading-time block on the left and the .gh-button-share on the right. With no flex-shrink or white-space rule on the button, narrow screens (and longer translated labels — e.g. French "Partager", German "Teilen", etc.) cause the button to be squeezed by its sibling and its text to wrap mid-word inside the pill.

Screenshot of the bug, French locale, iPhone Safari, on a post using show_post_metadata:

"Partager" rendering as "Partag" / "er" stacked inside the pill button.

Solution

Two CSS properties on .gh-button-share:

flex-shrink: 0;
white-space: nowrap;

• flex-shrink: 0 keeps the button at its intrinsic width so the sibling meta block absorbs the available width and wraps naturally (which it already does cleanly thanks to .gh-article-meta-content being flex/wrap-friendly).
• white-space: nowrap is belt-and-braces for any future translation longer than the pill's intrinsic width.

No HTML change, no breakpoint change, no specificity bump. Desktop layout is unaffected because the button was never wrapping there in the first place.

Alternatives considered

• Icon-only button below a breakpoint, mirroring the burger/search pattern (partials/icons/). Cleaner visually on very narrow screens but requires a new icon partial, a JS-less media-query swap, and a discussion on whether to keep the text for a11y. Happy to switch to this approach if preferred — let me know.
• Stack .gh-meta-share vertically below ~600px. Heavier visual change for what's a minor edge case, and the meta + button row reads well side-by-side once the button stops wrapping.

Files

• assets/css/screen.css — 2 lines added on .gh-button-share
• assets/built/screen.css + .map — rebuilt via gulp build to match the convention from Add share button #134

Browser support

Standard CSS, no new properties. Works everywhere .gh-button-share itself works.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5dfd3cb0-6298-45a5-b6fa-53cce835335e

📥 Commits

Reviewing files that changed from the base of the PR and between 038f9d6 and 05dd3ef.

⛔ Files ignored due to path filters (1)

• assets/built/screen.css.map is excluded by !**/*.map

📒 Files selected for processing (2)

• assets/built/screen.css
• assets/css/screen.css

---

Walkthrough

This change updates the .gh-button-share CSS rule in assets/css/screen.css to add two new style declarations. The flex-shrink: 0 property prevents the button from shrinking when placed in flex containers, and white-space: nowrap prevents the button text from wrapping across multiple lines. No other code changes are included.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding CSS to fix share button text wrapping on mobile viewports.
Description check	✅ Passed	The description provides detailed context about the problem, solution, alternatives considered, and affected files—all directly related to the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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