fix(ui): take the scroll area viewport's wrapper out of table layout - #559
Merged
Conversation
Radix's ScrollAreaPrimitive.Viewport renders its own direct-child wrapper with an inline display: table; min-width: 100%. A table box grows to its content's own minimum width regardless of the parent's width, so a long enough item name (a qualified table name, for example) pushes the wrapper past the visible panel, and the viewport's overflow-x: hidden then clips the excess. A row's count badge lost its trailing character this way (2.0k read as 2.0), and a connection badge was sliced mid glyph. Truncation on the item name cannot prevent it, since truncation needs a definite container width and a table box has none until its content has already forced one. Takes the wrapper out of table layout instead (display: block). Nothing in this component ever scrolls horizontally, so this is safe: no call site passes orientation="horizontal" to the scrollbar. Also corrects the Apache Cloudberry caveat text in compatibility.ts and docs/providers/README.md, which described the monitoring dashboard's overview and performance tabs as failing alongside the table and index statistics panels; screenshots taken while preparing an unrelated docs contribution show those two tabs read correctly, and only the per-table and per-index breakdowns fail. Closes #558
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
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.
Description
The Explorer sidebar (and the row detail sheet, which shares the same scroll area primitive) clips the right edge of its content when an item's name is long enough. Radix's ScrollAreaPrimitive.Viewport renders its own wrapper div with an inline display: table; min-width: 100%. A table box grows to its content's own minimum width regardless of the parent's width, so a long enough name pushes the wrapper past the visible panel, and the viewport's overflow-x: hidden clips the excess. A table's row count badge lost its trailing character this way (2.0k read as 2.0), and a connection badge was sliced mid glyph.
Type of Change
Related Issue
Closes #558
Changes Made
[&>div]:block!to the viewport, which takes Radix's direct-child wrapper out of table layout so the viewport's own width acts as a real cap instead of a floor. Nothing in this component ever scrolls horizontally (no call site passes orientation="horizontal" to the scrollbar), so this is safe.Testing
Test Environment
Screenshots (if applicable)
None attached to this PR. The bug and the fix were both confirmed visually while preparing screenshots for an unrelated docs contribution: before the fix, an object browser listing pg_ext_aux.pg_pax_fastsequence read a 2000-row table's count as 2.0; after the fix, the same view reads 2.0k in full.
Checklist
Additional Notes
Ran bun run format, lint, typecheck, knip, chart:check, channels:showcase:check, readme:check, security:check, the full test suite, bun run test:coverage plus coverage:check, and bun run build. All pass; coverage is 100 percent.