WordPress.org

Making WordPress.org

Opened 10 months ago

Closed 10 months ago

Last modified 10 months ago

#3903 closed defect (fixed)

make.wordpress.org/polyglots/teams UI overlap on mobile

Reported by: Trisha_Cornelius Owned by: coffee2code
Milestone: Priority: normal
Component: Translate Site & Plugins Keywords: ui-feedback ux-feedback has-screenshots
Cc:

Description

On a mobile device in portrait orientation the text overlaps to be unreadable.

Screenshot specifications:
LG G6 Firefox 62.0.3 for Android

Attachments (3)

make_wordpress_org_polyglots_themes.png (1.8 MB) - added by Trisha_Cornelius 10 months ago.
Screenshot showing overlap of text on make.wordpress.org/polyglots/teams
3903-with-new-css-applied.png (62.7 KB) - added by jobthomas 10 months ago.
meta-3903.r7826.png (43.6 KB) - added by coffee2code 10 months ago.
Example of the teams table after r7826

Download all attachments as: .zip

Change History (7)

@Trisha_Cornelius
10 months ago

Screenshot showing overlap of text on make.wordpress.org/polyglots/teams

#1 @jobthomas
10 months ago

To fix:

@media (max-width: 768px) {
  article.page .translators-info table tbody td[data-column-title]:before {
    position: initial;
    display: flex;
  }
}

Last edited 10 months ago by jobthomas (previous) (diff)

#2 @jobthomas
10 months ago

This is by the way the whole CSS section there:

@media (max-width: 768px) {
  article.page .translators-info table tbody td[data-column-title]:before {
    content: attr(data-column-title);
    position: initial;
    display: flex;
    left: 10px;
    width: 50%;
    font-weight: bold;
  }
}

#3 @coffee2code
10 months ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 7825:

WP i18n teams: Fix layout of the teams table on narrow screens.

Prevents overlapping of left cells with CSS-content added headers.

Props jobthomas.
Fixes #3903.

#4 @coffee2code
10 months ago

In 7826:

WP i18n teams: Improve layout of the teams table on narrow screens.

Fit related data into same rows without taking up vertical space when introducing CSS-content added headers. Effectively brings layout back to what was originally intoduced in #1481.

The uses of !important are to override instances of !important set in the Breathe theme.

See #3903.

@coffee2code
10 months ago

Example of the teams table after r7826

Note: See TracTickets for help on using tickets.