diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss index d9cae8f..54e17e2 100644 --- a/scss/westgate/_wiki-prose.scss +++ b/scss/westgate/_wiki-prose.scss @@ -1173,6 +1173,21 @@ display: contents; } +@media (min-width: 768px) { + .westgate-wiki .wiki-article-prose .wiki-infobox ~ .wg-mobile-table-scroll { + display: block; + width: calc(100% - var(--wiki-infobox-reader-width) - var(--wiki-infobox-reader-gutter)); + max-width: calc(100% - var(--wiki-infobox-reader-width) - var(--wiki-infobox-reader-gutter)); + overflow-x: auto; + } + + .westgate-wiki .wiki-article-prose .wiki-infobox ~ .wg-mobile-table-scroll > table[style*="width:100%"], + .westgate-wiki .wiki-article-prose .wiki-infobox ~ .wg-mobile-table-scroll > table[style*="width: 100%"] { + width: 100% !important; + max-width: 100%; + } +} + @media (max-width: 767.98px) { .westgate-wiki .wiki-article-prose .wg-mobile-table-scroll, .westgate-wiki .wiki-article-prose :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table), diff --git a/tests/wiki-mobile-table-rendering.test.js b/tests/wiki-mobile-table-rendering.test.js index bf45ba9..82c5ee4 100644 --- a/tests/wiki-mobile-table-rendering.test.js +++ b/tests/wiki-mobile-table-rendering.test.js @@ -11,6 +11,8 @@ const mobileMediaMatch = stylesheet.match(/@media\s*\(max-width:\s*767\.98px\)\s assert(mobileMediaMatch, "Expected a mobile-width table rendering media query"); const mobileStyles = mobileMediaMatch[0]; +const infoboxWidth = "calc(100% - var(--wiki-infobox-reader-width) - var(--wiki-infobox-reader-gutter))"; +const infoboxWidthPattern = infoboxWidth.replace(/[()]/g, "\\$&").replace(/\s+/g, "\\s*"); [ ".westgate-wiki .wiki-article-prose .wg-mobile-table-scroll", @@ -54,3 +56,21 @@ assert( !mobileStyles.includes(".westgate-wiki .wiki-page-content.wiki-article-prose > .card-body {\n\t\tmax-inline-size: 100%;\n\t\toverflow-x: auto"), "Mobile table scrolling should be scoped to table wrappers, not the whole article body" ); + +assert.match( + stylesheet, + new RegExp( + "@media\\s*\\(min-width:\\s*768px\\)\\s*\\{[\\s\\S]*" + + "\\.westgate-wiki\\s+\\.wiki-article-prose\\s+\\.wiki-infobox\\s*~\\s*\\.wg-mobile-table-scroll\\s*\\{[^}]*" + + "width:\\s*" + infoboxWidthPattern + "[^}]*" + + "max-width:\\s*" + infoboxWidthPattern, + "s" + ), + "Desktop article tables wrapped by the theme's mobile scroll helper should still shrink beside floated infoboxes" +); + +assert.match( + stylesheet, + /@media\s*\(min-width:\s*768px\)\s*\{[\s\S]*\.westgate-wiki\s+\.wiki-article-prose\s+\.wiki-infobox\s*~\s*\.wg-mobile-table-scroll\s*>\s*table\[style\*="width:100%"\],\s*\.westgate-wiki\s+\.wiki-article-prose\s+\.wiki-infobox\s*~\s*\.wg-mobile-table-scroll\s*>\s*table\[style\*="width: 100%"\]\s*\{[^}]*width:\s*100%\s*!important[^}]*max-width:\s*100%/s, + "Fluid-width tables inside the theme's scroll wrapper should fill the shrunken infobox-safe wrapper" +);