Skip to content

fix: restore horizontal scroll for wide tables in preview#206

Open
legolev wants to merge 1 commit into
alecdotdev:masterfrom
legolev:fix/wide-table-horizontal-scroll
Open

fix: restore horizontal scroll for wide tables in preview#206
legolev wants to merge 1 commit into
alecdotdev:masterfrom
legolev:fix/wide-table-horizontal-scroll

Conversation

@legolev

@legolev legolev commented Jul 10, 2026

Copy link
Copy Markdown

Problem

Wide tables in the markdown preview run off the right edge and the extra columns are unreachable — there is no horizontal scrollbar, and window zoom doesn't help (it scales everything proportionally, so the overflow ratio stays the same). Most visible in a narrow window, in split view, and with CSV tables. Reported on Windows.

Root cause

The preview article (.markdown-body) is overflow-x: hidden by design. Since a5fda8e the table uses:

.markdown-body table { display: table; table-layout: fixed; width: 100%; }

table-layout: fixed; width: 100% forces every column to share the pane width. When it can't compress any further — the combined cell padding: 6px 13px (26px/cell) across many columns exceeds the available width, or a cell can't wrap (e.g. .csv-data cells are white-space: nowrap) — the table overflows and is silently clipped by overflow-x: hidden instead of scrolling.

Fix

Make the table a horizontal scroll container, the way GitHub's markdown CSS does:

.markdown-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

The existing per-cell wrap rules (white-space: normal; overflow-wrap: anywhere) are kept, so tables whose content fits still wrap and never show a scrollbar — only genuinely wide tables scroll. A matching @media print override restores table-layout: fixed for PDF/HTML export, so exported tables wrap to fit the page (paper can't scroll).

Notes / trade-off

  • Tables that fit now shrink to their content width instead of always stretching to 100% of the pane — this matches GitHub and most markdown renderers.
  • Diff is 21 lines in src/styles.css, no markup or JS changes, so data-sourcepos on tables (scroll-sync) is untouched.

Testing

  • npm run build — passes.
  • npm run test:workflows — 25/25 pass (includes the HTML-export tests).
  • Verified the layout in a Chromium/WebView2-equivalent harness: with the current CSS a wide table is clipped with no scroll; with the fix it scrolls and keeps natural column widths, while text-wrapping tables stay scrollbar-free. PDF (window.print()@media print) still wraps.

Wide tables were clipped off the right edge of the preview with no way
to reach the hidden columns. The markdown preview article uses
`overflow-x: hidden`, and since a5fda8e the table used
`table-layout: fixed; width: 100%`, which forces every column to share
the pane width. When the combined cell padding (or non-wrapping content
such as CSV `white-space: nowrap` cells) exceeds the available width,
the table overflows and is silently clipped instead of scrolling.

Make the table a horizontal scroll container like GitHub does
(`display: block; width: max-content; max-width: 100%; overflow-x: auto`).
Cells keep the existing wrap rules, so tables that fit still wrap and
never show a scrollbar; only genuinely wide tables scroll.

Add a matching `@media print` override so PDF/HTML export keeps wrapping
tables to fit the page (paper cannot scroll).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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