diff --git a/resources/skins.citizen.scripts/overflowElements.js b/resources/skins.citizen.scripts/overflowElements.js index 622e492ca..cd0d6d148 100644 --- a/resources/skins.citizen.scripts/overflowElements.js +++ b/resources/skins.citizen.scripts/overflowElements.js @@ -225,6 +225,7 @@ class OverflowElement { * @return {void} */ function init( bodyContent ) { + // Do not wrap nested tables const tables = bodyContent.querySelectorAll( 'table:not( table table )' ); // Wrap tables diff --git a/resources/skins.citizen.styles/components/Tables.less b/resources/skins.citizen.styles/components/OverflowElements.less similarity index 67% rename from resources/skins.citizen.styles/components/Tables.less rename to resources/skins.citizen.styles/components/OverflowElements.less index 8c110d2c4..9f0987b84 100644 --- a/resources/skins.citizen.styles/components/Tables.less +++ b/resources/skins.citizen.styles/components/OverflowElements.less @@ -1,22 +1,21 @@ -// Responsive table for no js -// Avoid clipping when script is not yet loaded +// TODO: Revisit on MW 1.43 since Minerva table styles are merged upstream table { display: block; overflow-x: auto; + max-width: max-content; // Needed for the border } -// JS-enhanced responsive table -.citizen-table-wrapper { - overflow-x: auto; +// Elements enhanced by overflowElements.js +.citizen-overflow { + &-wrapper { + overflow-x: auto; - table { - display: table; - overflow: initial; + table { + display: table; + overflow: initial; + } } -} -// TODO: Move this out of tables styles when this is used by more stuff -.citizen-overflow { &--left { -webkit-mask-image: linear-gradient( 90deg, transparent, #000 15% ); mask-image: linear-gradient( 90deg, transparent, #000 15% ); diff --git a/resources/skins.citizen.styles/skin.less b/resources/skins.citizen.styles/skin.less index 791e33b50..ce974073f 100644 --- a/resources/skins.citizen.styles/skin.less +++ b/resources/skins.citizen.styles/skin.less @@ -40,7 +40,7 @@ @import 'components/StickyHeader.less'; @import 'components/Sitestats.less'; @import 'components/Sections.less'; - @import 'components/Tables.less'; + @import 'components/OverflowElements.less'; @import 'components/UserInfo.less'; // Mediawiki.skinning