Extend wide-table horizontal scrolling to all themes (screen only)#468
Merged
Conversation
PR #440 restored natural table width and horizontal scrolling for the default GitHub-2020 theme (via its own `body table` rule) and removed the column-collapsing `word-break: break-word` from export.css for all themes. The other ten themes, however, declare bare `table` rules with no overflow handling, so a wide table there has no scroll container: it overflows the pane and relies on document-level scrolling that may not be available. Add a universal `table` scroll container to export.css (which loads last, so it applies to every theme except where a higher-specificity `body table` rule already wins, i.e. the default theme). Use the proven GitHub pattern -- `display: block; width: max-content; max-width: 100%; overflow-x: auto` -- so the scrollbar stays on the table itself. Scope it to `@media screen` so PDF/print layout remains governed by print.css; an overflow scroll container would otherwise clip wide tables on paper rather than scrolling them. Related to #432
Contributor
Code Coverage ReportCurrent Coverage: 62.82% Coverage Details (Summary) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #440. That PR restored natural table width and horizontal scrolling for the default GitHub-2020 theme (via its own
body tablerule) and removed the column-collapsingword-break: break-wordfromexport.cssfor all themes.The other ten themes, however, declare bare
table { ... }rules with no overflow handling, so a wide table under those themes still has no scroll container — it overflows the pane and relies on document-level scrolling that may not be available. This PR closes that gap.Change
A single rule added to
MacDown/Resources/Extensions/export.css(which is appended last in the cascade):Design notes:
tableselectors of equal specificity; this rule wins becauseexport.cssloads last (seeMPRenderer.m). The default GitHub-2020 theme uses a higher-specificitybody tablerule and is intentionally left untouched, keeping Fix issue #432: restore natural table width and horizontal scrolling #440's behavior.@media screenis deliberate.export.cssis also present when the preview is printed to PDF, where WebKit switches to print media. An unscoped scroll container would clip wide tables on paper; the screen scope confines this to the live preview and browser-viewed HTML and leaves PDF layout toprint.css(whoseoverflow: visiblereset only coverspre, not tables).max-width: 100%keeps the scrollbar attached to the table itself rather than relying on document-level horizontal scrolling.Testing
Tables are rendered via CSS in the preview WebView, so the existing fixture tests (which only cover the markdown→HTML step) do not exercise this behavior. Verify manually on macOS:
## Wide Tableblock inMacDownTests/Fixtures/tables.mdworks well.@media screenscope should keepprint.cssin charge).overflow-wrapfrom Fix issue #432: restore natural table width and horizontal scrolling #440).Related to #432