fix: grid header bleeds through rows on scroll (#214)#229
Merged
Conversation
Chromium/WebKit silently ignores `position: sticky` on <thead>/<th> when the table has `border-collapse: collapse`. Compounded by no background on <thead> itself (only <th> cells have one), so any gap shows row text bleeding through. Fix in src/components/grid/ResultsGrid.tsx: 1. `border-collapse` -> `border-separate border-spacing-0`. Visually identical (cell-adjacent borders still touch), but makes sticky work in Chromium + WebKit. 2. `bg-[var(--color-bg-tertiary)]` on <thead> so the whole strip is opaque rather than relying on individual <th> backgrounds. Keep <th> bg classes so hover-state layering still works. 3. Same bg applied to the virtualized-path header wrapper (`shouldVirtualize ? ...`) for parity (>5000-row results). 4. Scroll container gets `isolate z-0`. Establishes a stacking context so sticky cannot be painted under a sibling stacking context. No tests added: the failing condition is a CSS rendering quirk in Chromium/WebKit that jsdom does not reproduce, so a class-presence assertion would be tautological. Browser tests cover scroll behavior in ResultsGrid.browser.test.tsx. Closes #214.
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
1 participant
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.
What
Fixes the results grid header row leaking data text through itself during vertical scroll. Header now occludes row content as expected.
Why
Chromium / WebKit silently ignore
position: stickyon<thead>/<th>when the table hasborder-collapse: collapse. Compounded by the absence of a background on the<thead>element itself (only the<th>cells had one), so any gap between cells showed row text peeking through. Visible in most scrolling sessions with anything more than a single-screen result set.Changes
src/components/grid/ResultsGrid.tsx— 4 class-name edits, 0 logic changes:<table>(line 750)border-collapse→border-separate border-spacing-0position: stickyworks in Chromium + WebKit<thead>(line 751)bg-[var(--color-bg-tertiary)]shouldVirtualizebranch (>5000-row results)<div>(line 591)isolate z-0Verification
npx vitest run src/components/grid/__tests__npx vitest run(full)npm run type-checknpx eslint src/components/grid/ResultsGrid.tsxnpx dprint check--no-verifyneededWhy no new tests
The failure mode is a CSS rendering quirk in Chromium / WebKit. jsdom doesn't actually paint, so a class-presence assertion would only verify the markup change — not the visual outcome. The existing
ResultsGrid.browser.test.tsxcovers scroll behavior at the integration level; per the issue body, no test changes were specified.