fix: data preview table body overlapping the pagination bar#28
Merged
Conversation
The data preview table hardcoded the virtual-scroll viewport height (scroll.y = 480). After apache#27 added the timestamp-precision info banner above the table, the fixed height no longer matched the actual space left in the flex layout, so the table body overflowed onto the bottom pagination bar. Replace the hardcoded height with a measured one: wrap the table in a flex-1 container and use a ResizeObserver to compute scroll.y from the container's real client height, subtracting the measured header height plus a scrollbar/border reserve. Re-measure after loading/data changes (nextTick) since the column toolbar, info banner and pagination toggle visibility. This adapts automatically to any future elements added above or below the table instead of relying on a magic constant. Also make .ant-card-body a flex column so the wrapper's flex-1 receives the real remaining height, and drop an unused Spin import.
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 #27. On the Data Preview page the table body overflowed onto the bottom pagination bar (the rows and the "条/页" selector overlapped).
Root cause
The table hardcoded its virtual-scroll viewport height as `scroll.y = 480` (introduced in #24). #27 then added the timestamp-precision info banner above the table. In the flex layout, that extra banner reduced the space actually available to the table, but the fixed `480` didn't know about it — so the table body extended past its container and covered the pagination row below it.
The bug is the hardcoded constant: it silently breaks whenever anything is added above or below the table.
Fix
Measure the height instead of hardcoding it:
This adapts automatically to any elements added above/below the table in the future, rather than relying on another magic constant. Column pagination and row virtual-scrolling from #24/#27 are unchanged.
Also drops an unused `Spin` import.
Testing