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

[Trisha_Cornelius]

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

Screenshot specifications:
LG G6 Firefox 62.0.3 for Android

[Trisha_Cornelius]

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

[jobthomas]

To fix:

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

[jobthomas]

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;
  }
}

[coffee2code]

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.

[coffee2code]

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]

Example of the teams table after r7826