mobile table rendering

2026-05-21 17:43:56 +02:00
parent 0c9b8f94a8
commit 9cd212876c
4 changed files with 457 additions and 39 deletions
@@ -0,0 +1,56 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const stylesheet = fs.readFileSync(
+	path.join(__dirname, "..", "scss", "westgate", "_wiki-prose.scss"),
+	"utf8"
+);
+
+const mobileMediaMatch = stylesheet.match(/@media\s*\(max-width:\s*767\.98px\)\s*\{[\s\S]*\n\}/);
+assert(mobileMediaMatch, "Expected a mobile-width table rendering media query");
+
+const mobileStyles = mobileMediaMatch[0];
+
+[
+	".westgate-wiki .wiki-article-prose .wg-mobile-table-scroll",
+	".westgate-wiki .wiki-article-prose .wg-mobile-table-scroll > table",
+	".westgate-wiki .wiki-article-prose .wg-mobile-table-scroll > table.wiki-table-layout-fixed[style*=\"width:100%\"]",
+].forEach(selector => {
+	assert(
+		mobileStyles.includes(selector),
+		`${selector} should receive mobile table handling without changing article HTML`
+	);
+});
+
+[
+	"overflow-x: auto",
+	"-webkit-overflow-scrolling: touch",
+	"max-inline-size: 100%",
+	"max-inline-size: none",
+	"min-inline-size: var(--wg-mobile-table-min-width, max-content)",
+	"min-width: var(--wg-mobile-table-min-width, max-content)",
+].forEach(declaration => {
+	assert(
+		mobileStyles.includes(declaration),
+		`Mobile wiki tables should include ${declaration}`
+	);
+});
+
+[
+	"attr(data-label)",
+	"wiki-mobile-table",
+	".wiki-article-prose tr {\n\t\tdisplay: block",
+	".wiki-article-prose td::before",
+	".wiki-article-prose th::before",
+].forEach(fragment => {
+	assert(
+	!mobileStyles.includes(fragment),
+		`Mobile table rendering must not use stacked/card conversion: ${fragment}`
+	);
+});
+
+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"
+);