Making WordPress.org

Opened 3 years ago

Closed 19 months ago

#5913 closed defect (bug) (fixed)

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

Reported by: muhammadfaizanhaidar's profile muhammadfaizanhaidar Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Profiles Keywords: needs-design 2nd-opinion
Cc:

Description

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

Attachments (3)

profile_issue.PNG (127.4 KB) - added by muhammadfaizanhaidar 3 years ago.
wordpress.org user profiles issue
profile_html.PNG (92.6 KB) - added by muhammadfaizanhaidar 3 years ago.
profile html tags
5913.extra-space.png (156.0 KB) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (15)

@muhammadfaizanhaidar
3 years ago

wordpress.org user profiles issue

@muhammadfaizanhaidar
3 years ago

profile html tags

#1 @Presskopp
3 years ago

This is helping here:

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

#2 @muhammadfaizanhaidar
2 years ago

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.

This ticket was mentioned in Slack in #meta by muhammadfaizanhaidar. View the logs.


2 years ago

This ticket was mentioned in Slack in #meta by muhammadfaizanhaidar. View the logs.


2 years ago

#5 @dd32
2 years ago

@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.

#6 @muhammadfaizanhaidar
2 years ago

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

max-width: 83%;

}
And I will also look into the username.
Thanks

#7 @coffee2code
2 years ago

  • Owner set to coffee2code
  • Status changed from new to accepted

#8 @coffee2code
2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#9 @SergeyBiryukov
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

@coffee2code It looks like there's now an extra &nbsp; 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?

#10 follow-up: @Presskopp
2 years ago

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

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

#11 @coffee2code
19 months ago

Fixed in [19502-dotorg]:

Profiles: Remove unnecessary &nbsp; after username in profile header.

Props sergeybiryukov, presskoop.
Fixes #5913.

#12 in reply to: ↑ 10 @coffee2code
19 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.