Background
Even before, wider tables were breaking out of the content area, but after the page tools were made sticky, this problem became significantly more problematic, as these tables will now overlap the menu. This is possible, because the content is later in the dom than the menu, because tables size to content and because grid allows elements to overflow outside of the allocated grid space.
Generally wide tables are not at the top of the page, so if the tools are not sticky, you won't encounter this problem.
User story
As a user I want tables to always be constrained to the content area.
Acceptance criteria
- Large tables should be constrained to content area. Where they are larger than the content area a horizontal scroll bar will appear.
Implementation details
Minerva handles this using styles defined here:
https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/refs/heads/master/resources/skins.minerva.base.styles/content/tables.less#12-47
These should be moved to https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.tables.less
- Upstream styles from Minerva to mediawiki.skinning in core
- Replace .content selector with .mw-parser-output selector.
- Wrap tables with a div element with the noresize class on to limit them to the current content are in Vector.
- The wrapping should not occur for infoboxes (e.g. https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements) [T366119]
- The wrapping should not occur for tables which are floated either via style attribute or floatright, floatleft classes.
QA steps
QA will be done as part of T366314
Sign off steps
- Create a task for cleaning up Minerva's CSS following the upstreaming of this code to core.
Captured in T113101
Original ticket
I added the following for myself to get this somewhat workable, but... it's a bit of a mess.
/* Fix wide tables on narrow layout */ @media all and (max-width:999px) { /* table overflow protection */ .wikitable { display: block; overflow-x: auto; /* table border collapse no longer functions, so remove border */ border: 0; /* The background of the table can now be outside the table, so restore original */ background-color: unset; } .wikitable > thead, .wikitable > tbody, .wikitable > tfoot { /* Cancel out floating table headers, as this is now within another scroll context */ top: 0 !important; /* Apply the background color here, as no longer on table */ background-color: #f8f9fa; } } /* Fix wide tables on pages with tools menu */ @media all and (min-width:1000px) and (max-width:1399px) { /* table overflow protection */ html.client-js.vector-feature-page-tools-pinned-enabled .wikitable { display: block; overflow-x: auto; /* table border collapse no longer functions, so remove border */ border: 0; /* The background of the table can now be outside the table, so restore original */ background-color: unset; } html.client-js.vector-feature-page-tools-pinned-enabled .wikitable > thead, html.client-js.vector-feature-page-tools-pinned-enabled .wikitable > tbody, html.client-js.vector-feature-page-tools-pinned-enabled .wikitable > tfoot { /* Cancel out floating table headers, as this is now within another scroll context */ top: 0 !important; /* Apply the background color here, as no longer on table */ background-color: #f8f9fa; } }
