Ensures that i18n-teams.css loads after P2-Breath to prevent getting overridden.

[Kenshino]

Will help to fix the responsive table issue on ​https://make.wordpress.org/polyglots/teams/

Tables are currently messed up in mobile view due to P2-Breathe overriding key styles

[coffee2code]

@Kenshino: Can you provide before and after screenshots of an example of what this change will fix? The table on the page looks the same before and after the patch is applied, which is to say it still looks bad at small page widths. (I verified that the CSS source ordering was changed to ensure i18n-teams.css came after the p2-breathe styling as you intended.)

[Kenshino]

So update

Currently broken layout (Desktop) is like this

​https://cloudup.com/cPHt91mxzO3/f

• The left and right padding of the first and last column respectively have issues
• The table is out of it's container.

The padding is getting overridden by by p2-breathe's style sheet

article.post .entry-content table tr td:first-child, article.post .entry-content table tr th:first-child, article#post-new .entry-content table tr td:first-child, article#post-new .entry-content table tr th:first-child, article.page .entry-content table tr td:first-child, article.page .entry-content table tr th:first-child {
    /* padding-left: 0; */
}

Because the p2 stylesheet has a much more specific selector, it has high priority regardless of load order.

So I'd have to submit a patch to change the specificity of the rule in i18n-teams.css as well

Which would get us this ​https://cloudup.com/cg1kMCWGmU6/f

In addition, because the table is overflowing likely because of the smaller content space now, it'd make sense to apply table-layout: fixed to it.

But by doing that, the text has not enough space and breaks line like this ​https://cloudup.com/cczVxALwTph/f

So giving the first th around 32% of width would solve that, but now would make the word WP Locale overflow ​https://cloudup.com/cgkwCeL73w8/f

Which can be easily solved by adding a selector to th 2nd child that sets word-break: break-word and white-space:normal;

So desktop view is fixed

Mobile view however is still messed up

.translators-info table tbody td:nth-of-type(1) {
    display: inline-block;
    padding-left: 40%;
    padding-right: 5px;
    width: 30%;
    border-bottom: none !important;
}

The padding-left and width is being overridden so it looks like this ​https://cloudup.com/cboWdBDIww7/f

which is being overriden by p2-breathe and my 32% width change

article.post .entry-content table tr td:first-child, article.post .entry-content table tr th:first-child, article#post-new .entry-content table tr td:first-child, article#post-new .entry-content table tr th:first-child, article.page .entry-content table tr td:first-child, article.page .entry-content table tr th:first-child {
    padding-left: 0;
    width: 32%;
}

So a more specific selector is needed plus the 32% width change for the first th column needs a min-width media query.

Changing that almost gets it fixed like ​https://cloudup.com/c7AVUjEeOTk/f

With the reduced width on the content column, the padding is a little too much causing the overflow column to break line.

@media (max-width: 768px)
.translators-info table tbody td {
    padding: 6px 10px;
    position: relative;
    padding-left: 40%;
}

Changing 10px to 8px fixes that

and ​https://cloudup.com/cM6v6TKzMEv/f is the final product for the mobile view.

While that patch makes sense to just have, we need to do more. Let me know if that makes sense and I'll be happy to submit a patch. But take note since I can't actually test it for real, I only have Inspector to count on

[ocean90]

In 4428:

Breathe: Add full-width page template.

See #2154.

[ocean90]

In 4429:

WP i18n teams: Ensure that the stylesheet is loaded after theme's stylesheets.

Props Kenshino.
See #2154.

[ocean90]

In 4430:

WP i18n teams: Update styles for overview and team pages to play nice with o2.

Fixes #2154.