From 73c37e8847fa3cfc484af4dba25d7f68bd0cafec Mon Sep 17 00:00:00 2001 From: jp-ayyappan Date: Thu, 12 Mar 2026 00:08:00 -0400 Subject: [PATCH 1/4] feat(tables): add remark plugin to tag wide table columns Add a remark plugin that detects columns with long text content and applies a `wide-cell` CSS class for targeted word-wrapping, keeping short columns compact while preventing wide columns from overflowing. Co-Authored-By: Claude Opus 4.6 --- docusaurus.config.ts | 3 ++ plugins/remark-table-wide-cells.js | 63 ++++++++++++++++++++++++++++++ src/css/custom.css | 20 ++++++++++ 3 files changed, 86 insertions(+) create mode 100644 plugins/remark-table-wide-cells.js diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 4e534973..48ccaf1d 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -97,6 +97,9 @@ const config: Config = { routeBasePath: "/", sidebarPath: "./sidebars.js", docItemComponent: "@theme/ApiItem", // Derived from docusaurus-theme-openapi + remarkPlugins: [ + [require('./plugins/remark-table-wide-cells'), { threshold: 100 }], + ], // Please change this to your repo. // Remove this to remove the "edit this page" links. // editUrl: diff --git a/plugins/remark-table-wide-cells.js b/plugins/remark-table-wide-cells.js new file mode 100644 index 00000000..2285673c --- /dev/null +++ b/plugins/remark-table-wide-cells.js @@ -0,0 +1,63 @@ +/** + * Remark plugin that detects table columns with long text content + * and tags all cells in those columns with a `wide-cell` CSS class. + * + * This enables targeted CSS word-wrapping on only the columns that need it, + * keeping short columns compact. + */ +const { visit } = require('unist-util-visit'); + +/** Recursively extract plain text from an MDAST node. */ +function extractText(node) { + if (node.type === 'text' || node.type === 'inlineCode') { + return node.value || ''; + } + if (node.children) { + return node.children.map(extractText).join(''); + } + return ''; +} + +function remarkTableWideCells({ threshold = 100 } = {}) { + return (tree) => { + visit(tree, 'table', (table) => { + if (!table.children || table.children.length === 0) return; + + // Determine the number of columns from the first row + const numCols = table.children[0].children + ? table.children[0].children.length + : 0; + if (numCols === 0) return; + + // Check each column: does ANY cell exceed the threshold? + const wideColumns = new Set(); + for (const row of table.children) { + if (!row.children) continue; + for (let colIdx = 0; colIdx < row.children.length; colIdx++) { + const cell = row.children[colIdx]; + const text = extractText(cell); + if (text.length > threshold) { + wideColumns.add(colIdx); + } + } + } + + if (wideColumns.size === 0) return; + + // Tag all cells in wide columns + for (const row of table.children) { + if (!row.children) continue; + for (let colIdx = 0; colIdx < row.children.length; colIdx++) { + if (!wideColumns.has(colIdx)) continue; + const cell = row.children[colIdx]; + cell.data = cell.data || {}; + cell.data.hProperties = cell.data.hProperties || {}; + const existing = cell.data.hProperties.className || []; + cell.data.hProperties.className = [...existing, 'wide-cell']; + } + } + }); + }; +} + +module.exports = remarkTableWideCells; diff --git a/src/css/custom.css b/src/css/custom.css index f5c47a0f..81fcbd5a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -630,6 +630,26 @@ html[data-theme='dark'] div[class*="language-shell"] code::before { text-decoration: underline; } +/************** +** TABLES — responsive with targeted wrapping +***************/ + +/* Make tables responsive with horizontal scroll */ +.markdown table { + display: block; + max-width: 100%; + overflow-x: auto; + white-space: nowrap; +} + +/* Allow word-wrapping in columns tagged as wide by remark-table-wide-cells */ +.markdown table td.wide-cell, +.markdown table th.wide-cell { + white-space: normal; + word-break: break-word; + min-width: 200px; +} + /************** ** OPENTDF LANDING — DARK DESIGN TOKENS ***************/ From 286ef669af22d7c7219454e54a0f9acc80d1e3b7 Mon Sep 17 00:00:00 2001 From: Jp Ayyappan <108297634+jp-ayyappan@users.noreply.github.com> Date: Thu, 12 Mar 2026 00:10:56 -0400 Subject: [PATCH 2/4] Update plugins/remark-table-wide-cells.js Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- plugins/remark-table-wide-cells.js | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/remark-table-wide-cells.js b/plugins/remark-table-wide-cells.js index 2285673c..3746b031 100644 --- a/plugins/remark-table-wide-cells.js +++ b/plugins/remark-table-wide-cells.js @@ -34,6 +34,7 @@ function remarkTableWideCells({ threshold = 100 } = {}) { for (const row of table.children) { if (!row.children) continue; for (let colIdx = 0; colIdx < row.children.length; colIdx++) { + if (wideColumns.has(colIdx)) continue; const cell = row.children[colIdx]; const text = extractText(cell); if (text.length > threshold) { From 3c016fdd9ea61c0aa278a5feb484e3b7c80106ad Mon Sep 17 00:00:00 2001 From: Jp Ayyappan <108297634+jp-ayyappan@users.noreply.github.com> Date: Thu, 12 Mar 2026 00:11:10 -0400 Subject: [PATCH 3/4] Update plugins/remark-table-wide-cells.js copilot suggestion Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- plugins/remark-table-wide-cells.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/remark-table-wide-cells.js b/plugins/remark-table-wide-cells.js index 3746b031..a61ca7f9 100644 --- a/plugins/remark-table-wide-cells.js +++ b/plugins/remark-table-wide-cells.js @@ -54,7 +54,7 @@ function remarkTableWideCells({ threshold = 100 } = {}) { cell.data = cell.data || {}; cell.data.hProperties = cell.data.hProperties || {}; const existing = cell.data.hProperties.className || []; - cell.data.hProperties.className = [...existing, 'wide-cell']; + cell.data.hProperties.className = Array.from(new Set([...existing, 'wide-cell'])); } } }); From 2f7cd8d19aaf5decaeb280c8b704489aa1e495dc Mon Sep 17 00:00:00 2001 From: jp-ayyappan Date: Tue, 7 Apr 2026 10:31:52 -0400 Subject: [PATCH 4/4] fix(theme): align remark-table-wide-cells with DSP implementation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Lower threshold from 100 → 40 to match DSP (more aggressively catches wide columns) - Add string guard for className to match DSP's defensive handling - Replace deprecated word-break: break-word with overflow-wrap: anywhere per CSS Text Level 4 spec (CodeRabbit DSPX-2800) Co-Authored-By: Claude Sonnet 4.6 (1M context) --- docusaurus.config.ts | 2 +- plugins/remark-table-wide-cells.js | 3 ++- src/css/custom.css | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 578c4b27..161fd9dd 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -130,7 +130,7 @@ const config: Config = { sidebarPath: "./sidebars.js", docItemComponent: "@theme/ApiItem", // Derived from docusaurus-theme-openapi remarkPlugins: [ - [require('./plugins/remark-table-wide-cells'), { threshold: 100 }], + [require('./plugins/remark-table-wide-cells'), { threshold: 40 }], ], // Please change this to your repo. // Remove this to remove the "edit this page" links. diff --git a/plugins/remark-table-wide-cells.js b/plugins/remark-table-wide-cells.js index a61ca7f9..c16fa40d 100644 --- a/plugins/remark-table-wide-cells.js +++ b/plugins/remark-table-wide-cells.js @@ -53,7 +53,8 @@ function remarkTableWideCells({ threshold = 100 } = {}) { const cell = row.children[colIdx]; cell.data = cell.data || {}; cell.data.hProperties = cell.data.hProperties || {}; - const existing = cell.data.hProperties.className || []; + let existing = cell.data.hProperties.className || []; + if (typeof existing === 'string') existing = [existing]; cell.data.hProperties.className = Array.from(new Set([...existing, 'wide-cell'])); } } diff --git a/src/css/custom.css b/src/css/custom.css index 91e7ea5d..e1cc0cf5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -615,7 +615,8 @@ html[data-theme='dark'] div[class*="language-shell"] code::before { .markdown table td.wide-cell, .markdown table th.wide-cell { white-space: normal; - word-break: break-word; + overflow-wrap: anywhere; + word-break: normal; min-width: 200px; }