Slack User name overlays header meta links if name gets long in wordpress.org profile

[muhammadfaizanhaidar]

The text in <p> with id="slack-username" overlays the div with id="header-meta-links".

[muhammadfaizanhaidar]

wordpress.org user profiles issue

[muhammadfaizanhaidar]

profile html tags

[Presskopp]

This is helping here:

#slack-username {
    max-width: 83%;
}

[muhammadfaizanhaidar]

Can I get access to ​https://profiles.wordpress.org/wp-content/themes/profiles.wordpress.org/style.css?ver=45
So I can update the css and resolve this issue thanks.

[dd32]

@muhammadfaizanhaidar Since it's not open-source, make CSS changes within the browser inspector and just post the changes needed to the ticket.

However, I would suggest changing your Slack username to be shorter, as it's irritating in Slack with such long usernames and @mention's. Move your WordPress.org username to your Slack bio instead.

[muhammadfaizanhaidar]

@dd32 I have verified this works.
#slack-username {

max-width: 83%;

}
And I will also look into the username.
Thanks

[coffee2code]

Fixed in [18634-dotorg]:

Profiles: Prevent overlap of username text and edit links in profile header.

Also improves responsiveness of usernames section by keeping the Slack username part of the string contiguous instead of wrapping piecemeal when possible.

Props muhammadfaizanhaidar, coffee2code.
Fixes #5913.

[SergeyBiryukov]

@coffee2code It looks like there's now an extra   before the comma: 5913.extra-space.png​.

The responsiveness seems fine with or without it, but the extra space looks a bit odd, and the purpose is not quite clear to me. Would it be possible to remove it or move it after the comma?

[Presskopp]

A very long username/slack name will still get cut and not be fully displayed.

Besides of that, looks like the   can safely be deleted.

[coffee2code]

Fixed in [19502-dotorg]:

Profiles: Remove unnecessary   after username in profile header.

Props sergeybiryukov, presskoop.
Fixes #5913.

[coffee2code]

Replying to Presskopp:

A very long username/slack name will still get cut and not be fully displayed.

Fixed in [19503-dotorg]:

Profiles: Ensure very long usernames don't get hidden from view.

Props presskoop, coffee2code.
See #5913.