eol.php layout broken on mobile due to extra-wide table

[SteveDesmond-ca]

Steps to reproduce:

• browse to https://www.php.net/eol.php with a viewport <=360px
• scroll to the right to see the notes for past releases

Expected result:

• notes are legible

Observed result:

• wide table breaks intended page layout
  

[cmb69]

Oh, that dark bar at the right hand side is unlikely to be intended here. I also see it with wider viewports (about 950px).

[SteveDesmond-ca]

Yeah, I see that too, between 768-979px; but I think that's a separate problem, where the sidebar shouldn't be shown if there's no aside. The width: 70% !important in the media query is overriding the :only-child selector which would otherwise have the main conent be full-width. Want me to create another issue for that one?

[derickr]

I can't reproduce this — there have been changes, so perhaps this is fixed?

[SteveDesmond-ca]

Still there to some extent: shrink the browser's viewport to 320px wide and scroll right.

I believe the best fix at this point is to set the thead and "odd" rows' (2n+1) background-color to var(--content-background-color) instead of the default transparent.

table.standard tr:nth-child(2n+1) td, table.standard thead th {
  background-color: var(--content-background-color);
}

That said, the fix from #499 decreased the breaking width to 352px, and the vast majority of phones these days are wider than that, so I'd be willing to have this closed as "good enough" since very few people will still experience this.