Always break long branch-names

[simurai]

What are you trying to accomplish?

This fixes https://github.com/github/primer/issues/788 and makes sure that long branch-name wrap also when using _ or . as separators.

What approach did you choose and why?

Add word-break: break-all;

What should reviewers focus on?

One concern with this is that words separated with a dash (-) will wrap whenever there is no space and not after the dash. See https://github.com/github/primer/issues/788#issuecomment-1072309002.

Are additional changes needed?

• No, this PR should be ok to ship as is. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: 211a27e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[langermank]

@simurai I did a little reading on word-break (did you know break-word is deprecated? 😮) and I'm wondering if this would solve for the - dash scenario you mentioned in the PR description:

Suggested change

	word-break: break-all;
	overflow-wrap: anywhere;
	word-break: normal;

[simurai]

@langermank overflow-wrap: anywhere; still seems not supported in Safari.

Another thing with dashes/hyphens is that if the branch name starts with a dash/hyphen and follows with dots, underlines, slashes... it prioritizes that first dash/hyphen, leaving a big gap after. So maybe for now and this specific case with branch names, using word-break: break-all might still be the better option? Even tough it's deprecated. 😅

overflow-wrap: anywhere;	word-break: break-all;

[langermank]

Oh shoot! I didn't check the browser support. I would just keep break-all then. It's not deprecated, break-word is (sorry, didn't mean to confuse you). I was just surprised by that as I was thinking of recommending it!

[simurai]

Ok, cool. In that case, mind approving? 🙇