Skip to content

Fix mermaid rendering, table column widths, and display math size - #57

Merged
patakuti merged 1 commit into
mainfrom
fix/rendering-issues
Jun 19, 2026
Merged

Fix mermaid rendering, table column widths, and display math size#57
patakuti merged 1 commit into
mainfrom
fix/rendering-issues

Conversation

@patakuti

@patakuti patakuti commented Jun 19, 2026

Copy link
Copy Markdown
Owner

Summary

  • Mermaid not rendering: The theme restore script was calling mermaid.initialize({startOnLoad: false}) on page load, overriding the initial startOnLoad: true config before DOMContentLoaded fired. Fixed by switching to startOnLoad: false + explicit mermaid.run() in DOMContentLoaded. Also pinned the CDN to mermaid@10 to prevent future breaking API changes.
  • Table column widths: Changed width: 100% to width: auto with explicit table-layout: auto so each column sizes itself to its content instead of distributing space equally.
  • Display math too large: Added font-size: 0.9em; overflow-x: auto to .math.display to reduce block math size relative to body text and handle wide formulas on narrow screens.

Test plan

  • Open a page with a mermaid diagram — confirm it renders correctly
  • Open a page with a saved theme in localStorage — confirm mermaid still renders
  • Open a page with a markdown table — confirm column widths vary by content
  • Open a page with display math ($$...$$) — confirm it is slightly smaller than before and wide formulas scroll horizontally

🤖 Generated with Claude Code

- Fix mermaid not rendering when a saved theme is stored in localStorage:
  the theme restore script was calling mermaid.initialize({startOnLoad:
  false}), overriding the initial startOnLoad:true config. Changed to
  startOnLoad:false and explicit mermaid.run() in DOMContentLoaded.
  Also pinned mermaid CDN to v10 to avoid future breaking API changes.
- Change table width from 100% to auto so column widths are sized by
  content rather than being distributed equally across the container.
- Add font-size:0.9em and overflow-x:auto to .math.display to reduce
  display math size and support wide formulas on narrow screens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@patakuti
patakuti merged commit 9b5daef into main Jun 19, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant