From d853e54a1afa422a1abd4cfb9e637a3e88db5ef7 Mon Sep 17 00:00:00 2001 From: banozz <263121691+banozz0@users.noreply.github.com> Date: Sat, 12 Sep 2026 20:38:00 +0200 Subject: [PATCH] fix(render): let markdown tables scroll instead of splitting words The markdown body sets overflow-wrap: anywhere so long tokens never overflow the card, but table cells inherit it and a narrow column shrinks the table until "Rank" renders as "Ra / nk". Cells now wrap only at spaces and the table scrolls sideways when it is genuinely too wide. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Q8pZd65UNrDJLKipK5kCto --- .changeset/markdown-tables-scroll.md | 5 +++++ server/richRender.ts | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/markdown-tables-scroll.md diff --git a/.changeset/markdown-tables-scroll.md b/.changeset/markdown-tables-scroll.md new file mode 100644 index 00000000..81c36529 --- /dev/null +++ b/.changeset/markdown-tables-scroll.md @@ -0,0 +1,5 @@ +--- +"sideshow": patch +--- + +Markdown tables scroll sideways in a narrow column instead of wrapping words mid-word ("Ra / nk"). diff --git a/server/richRender.ts b/server/richRender.ts index 4780e711..98dbf0a5 100644 --- a/server/richRender.ts +++ b/server/richRender.ts @@ -157,8 +157,10 @@ blockquote { border-left: 2px solid var(--border-2); color: var(--muted); } -table { border-collapse: collapse; font-size: 13px; } -th, td { border: 0.5px solid var(--border); padding: 4px 8px; text-align: left; } +/* A table scrolls sideways instead of shrinking: the body's overflow-wrap: anywhere + would otherwise split "Rank" into "Ra / nk" in a narrow column. */ +table { border-collapse: collapse; font-size: 13px; display: block; max-width: 100%; overflow-x: auto; } +th, td { border: 0.5px solid var(--border); padding: 4px 8px; text-align: left; overflow-wrap: normal; } th { background: var(--hover); } img { max-width: 100%; height: auto; border-radius: 6px; } hr { border: none; border-top: 0.5px solid var(--border); margin: 1em 0; }