Header link icon breaks to second line at a certain title lengths

[christophermather]

A description of the work

When an h2 header title is of a particular length, the link icon breaks to a second line on its own. We need to decide 1) if we think this is a problem, 2) if we can think of a solution and 3) if it's worth solving given the effort.

Note that this affects titles of particular lengths - long, but not so long that the title text breaks to a second line - and titles of particular length in certain viewports (mobile, tablet).

Some examples of this happening:

Example 1: Content guide > Our style > Voice and tone

Example 2: Brand > Templates > Google Slides presentation templates

Example 3: Brand > Principles > Convince with soundness not loudness

Point of contact on this issue

@christophermather

Reproduction steps (if necessary)

No response

Skills Needed

• [ ] Any Human
• [X] Design
• [ ] Content
• [X] Engineering
• [ ] Acquisition
• [ ] Product
• [ ] Other

Does this need to happen in the next 2 weeks?

• [ ] Yes
• [ ] No

How much time do you anticipate this work taking?

No response

Acceptance Criteria

• [ ] Decide whether this is a problem (design)
• [ ] If so, suggest a solution (engineering)
• [ ] Determine whether juice is worth the squeeze (design/engineering/product)

[adunkman]

See this Slack thread for suggestions on how to approach.

[beepdotgov]

Just me here, but I'd be inclined to see if text-wrap: balance helps address the issue. (Fully agree with the Slack thread that text-wrap: pretty would be ideal, but balance's browser support is a bit better.)

Happy to look into this whenever it's ready to be prioritized.

[bpdesigns]

@adunkman I recommend prioritizing this while we have people with front end skills on TLC