Part of #737
What this builds
Enhances scripts/render_design_doc.ts (and its test suite) with layout and rendering improvements requested during interactive design document reviews:
- Collapsible Sidebar Navigation: Adds a
◀ collapse toggle button inside the <nav class="toc"> header and a floating ☰ Table of Contents button when collapsed. When collapsed, .layout.toc-collapsed expands the main content area to 100% full width (grid-template-columns: 1fr). Persists the user's collapsed/expanded preference across page reloads via localStorage.
- Table Overflow & Column Formatting: Fixes narrow letter-by-letter / single-word cell wrapping by applying
overflow-wrap: normal; word-break: normal; on th/td, white-space: nowrap; on th headers, and min-width: 650px on tables inside scrollable .table-wrapper containers.
- Raw SVG Passthrough: Passes inline
<svg ...>...</svg> blocks directly through to HTML output unescaped so rich graphical Entity Relationship Diagrams (ERDs) and architecture diagrams render visually in Chrome rather than escaping to raw text.
Acceptance criteria
- Running
scripts/render_design_doc.ts or scripts/render-design-doc.sh on markdown containing <svg> blocks renders raw unescaped SVG elements in the output HTML.
- The rendered HTML includes a collapsible Table of Contents sidebar with toggle controls (
◀ and ☰ Table of Contents), expanding main content to full width when collapsed and saving collapsed state in localStorage.
- Multi-column tables inside
.table-wrapper maintain normal word boundaries and nowrap headers without squished single-word column wrapping.
- All layout unit tests in
test/render_design_doc_script.test.ts pass 100% green.
Part of #737
What this builds
Enhances
scripts/render_design_doc.ts(and its test suite) with layout and rendering improvements requested during interactive design document reviews:◀collapse toggle button inside the<nav class="toc">header and a floating☰ Table of Contentsbutton when collapsed. When collapsed,.layout.toc-collapsedexpands the main content area to 100% full width (grid-template-columns: 1fr). Persists the user's collapsed/expanded preference across page reloads vialocalStorage.overflow-wrap: normal; word-break: normal;onth/td,white-space: nowrap;onthheaders, andmin-width: 650pxon tables inside scrollable.table-wrappercontainers.<svg ...>...</svg>blocks directly through to HTML output unescaped so rich graphical Entity Relationship Diagrams (ERDs) and architecture diagrams render visually in Chrome rather than escaping to raw text.Acceptance criteria
scripts/render_design_doc.tsorscripts/render-design-doc.shon markdown containing<svg>blocks renders raw unescaped SVG elements in the output HTML.◀and☰ Table of Contents), expanding main content to full width when collapsed and saving collapsed state inlocalStorage..table-wrappermaintain normal word boundaries and nowrap headers without squished single-word column wrapping.test/render_design_doc_script.test.tspass 100% green.