fix: data preview table body overlapping pagination on load#29
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. The data preview table hardcoded its virtual-scroll viewport height (
scroll.y = 480). After #27 added the timestamp-precision info banner above the table, that fixed height no longer matched the actual space left in the flex layout, so the table body overflowed onto the bottom pagination bar.Fix
flex-1container and use aResizeObserverto computescroll.yfrom the container's real client height, subtracting the measured header height plus a scrollbar/border reserve.nextTick), since the column toolbar, info banner, and pagination toggle visibility..ant-card-bodya flex column so the wrapper'sflex-1receives the real remaining height.Spinimport.This adapts automatically to any future elements added above or below the table, instead of relying on a magic constant.
Testing
pnpm build(vue-tsc + vite) passes.