Slack links not wrapping on Make blogs on mobile

[justinahinon]

Links to Slack threads, messages or channels do not wrap properly on mobile on Make blogs.

I feel like it's deliberate because of this line:

a [href * = ". slack.com"] {
  white-space: nowrap;
}

But I don't quite understand why.

Setting the white-space property to normal fixes the issue.

[justinahinon]

Default behaviour, links not wrapping

[justinahinon]

Slack links wrap correctly after changing white-space property value to normal

[justinahinon]

Here's the good screenshot for the links not wrapping correctly

[Otto42]

Can you provide a link to an example of this behavior instead of a screenshot of it?

[justinahinon]

Sure.

On Themes team homepage for instance ​https://make.wordpress.org/themes

Also this post that contains a Slack link ​https://make.wordpress.org/themes/2020/07/13/proposal-allow-themes-to-add-a-top-level-admin-menu/

This post too on Core blog ​https://make.wordpress.org/core/2020/07/13/css-chat-summary-9th-july-2020/

I assume it's the same on all posts/pages that has a Slack link.

Happening on Android, Chrome(83.0.4103.106) and Firefox Nightly.

[dd32]

But I don't quite understand why.

Whitespace is set to nowrap to prevent the slack icon appearing on the line above the link that's inserted.

Example, if you set the wrapping to normal on ​https://make.wordpress.org/themes/2020/07/13/proposal-allow-themes-to-add-a-top-level-admin-menu/ you'll see that the icon is on the line previous.

This isn't an issue when the link text contains spaces, but is an issue when it doesn't (ie. a URL)

[justinahinon]

I'm not sure I understand what you mean here:

Whitespace is set to nowrap to prevent the slack icon appearing on the line above the link that's inserted.

I've duplicated the Slack link node on this page and change the content to text with the inspector on the page you linked above. Here's what I get ​https://prnt.sc/tkzjgz (screenshot).

[dd32]

Replying to justinahinon:

I'm not sure I understand what you mean here:

If you set white-space: normal you'll get Screen Shot 2020-07-20 at 3.38.32 pm.png​

[dd32]

In 10082:

Make Sites: alter the Slack link wrapping to break words rather than forcing it to remain on one line.

Props justinahinon.
Fixes #5320.