Fix wide tables overflowing their viewport by the leading gutter - #26
Open
jedrzejsieracki wants to merge 1 commit into
Open
Fix wide tables overflowing their viewport by the leading gutter#26jedrzejsieracki wants to merge 1 commit into
jedrzejsieracki wants to merge 1 commit into
Conversation
Signed-off-by: jedrzejsieracki <jedrzejsieracki@users.noreply.github.com>
Open
2 tasks
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
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.
Fix wide tables overflowing their viewport by the leading gutter
Problem
In "wide surface" mode, a table's card overflows its scroll viewport by exactly
the leading gutter width. On platforms with classic (non-overlay) scrollbars —
Windows — this is plainly visible: a horizontal scrollbar strip as wide as the
whole window appears below the table, and the table's last column is clipped
past the visible right edge until the user scrolls. On macOS the same overflow
exists but is masked by overlay scrollbars and by typically smaller gutters, so
it presents there only as a hidden scrollable region.
Root cause
layoutTablepositions a wide table by giving the wrapper an inlinemargin-left: -gutterand exposing--table-leading-gutter, and the CSS shiftsthe sizer back into text alignment:
The margin moves the sizer right without shrinking it — the sizer keeps
width: 100%of the viewport, so it extendsgutterpixels beyond theviewport's right edge and the viewport becomes scrollable by that amount.
Measured after resizing the window to 1650 px with the reading width fixed
(showcase, "Project pulse" table, before this fix):
Fix
Subtract the gutter from the sizer's width so the card ends at the surface
edge:
The sizer keeps its
min-width(the readable per-column width), so when theremaining surface genuinely cannot fit the table — e.g. an expanded table at a
narrow reading width — the table still overflows and scrolls, which is the
intended behavior.
After the fix,
scrollWidth == clientWidthin wide mode at every measuredwindow width (980 px and 1650 px), and the card starts at the text column's
left edge and ends exactly at the surface's right edge.
Testing on macOS
The overflow is invisible with overlay scrollbars, so verify by measurement:
"Project pulse" enters wide mode.
.table-viewportcheck thatscrollWidth === clientWidth(previously it exceeded it by the gutter).left and end at the shell's right padding; expanding/collapsing and window
resizes must keep that geometry.
On Windows (or with "Show scroll bars: Always" on macOS) the stray full-width
scrollbar strip below wide tables disappears.
Tests
testWideTableKeepsReadableColumnsAndExpandsIndependently(
EditorWebViewTests) was reviewed line by line: its web view is 900 px wide(surface ≈ 820 px), narrower than the table's 864 px minimum, so the
sizer's
min-widthdominates there and every asserted geometry metric isunchanged by this rule. The rule only removes the phantom overflow that
appeared when the surface was wider than the table — a regime the test does
not exercise.
RendererStylesTestsasserts on.table-viewport,table, andth, tdrules; this change touches only
.table-scroll.is-wide .table-sizer.swift testruns on macOS CI (this patch was authored on Linux, where theSwift suite cannot run).
clipped last column; after: clean card) are attached to this PR.
Scope
One CSS rule in
Resources/Renderer/renderer.css. No JS, API, or payloadchanges. Found while building the experimental .NET port slice
(
docs/PORTING.md); independent of the accompanying table-relayout fix andmerges in either order.