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: Advanced
• Run ID: d2da5464-5f74-4e23-a8b6-f459d0364a80

📥 Commits

Reviewing files that changed from the base of the PR and between 05dd3ef and 6ce5ffa.

⛔ 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

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 0 remain after this review.

---

Walkthrough

The .gh-button-share CSS rule now includes flex-shrink: 0 and white-space: nowrap. These declarations prevent the button from shrinking in a flex container and keep its contents on one line.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Change: Bug fix

Suggested reviewers: minimaluminium

Merge Risk: ⚪ Minimal · up to 6ce5f

The Share label is kept on one line to address the reported mobile wrapping. No concrete regression is established, so no actionable merge-blocking risk is supported.

Architecture Summary

Architecture risk: 🔵 Low · up to 6ce5f

The change affects 1 system.

Changed systems: assets

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — assets (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in assets/css/screen.css: .gh-button-share gains flex-shrink: 0 and white-space: nowrap; its existing alignment, border, color, background, cursor, and transition styles remain unchanged.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the mobile share-button text-wrapping fix.
Description check	✅ Passed	The description explains the wrapping problem and the CSS changes that address it.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

_{Comment @coderabbitai help to get the list of available commands.}

[minimaluminium]

Thanks so much for this fix, @bst1n! I rebased your branch onto the latest main and rebuilt the CSS to clear the conflicts with the built files. Your commit is unchanged otherwise. Merging now. Really appreciate the contribution! 🙌