Fix paginated table height and mobile scrolling - #3871
Draft
laurakwhit wants to merge 3 commits into
Draft
Conversation
The table sized itself with
`calc(100vh - var(--layout-pt) - ${tableContainer.offsetTop + 32}px)`.
`offsetTop` is a plain DOM read inside `$derived`, so it was measured once at
mount and never recomputed on resize or when the filter bar wrapped; it
compared against `100vh` rather than the scroll container; and the `+ 32`
hardcoded the desktop `p-8` padding. The residual left a permanent 1px page
scrollbar. The same indefinite-height chain made the empty state's
`calc(100% - var(--table-header-h))` resolve to `auto`, so empty states and
callers' `h-full` empty wrappers collapsed to content height.
Give the chain from the app shell to the table container a definite height so
flexbox does the arithmetic and reflows on resize for free, and drop the
measurement code.
- Fill the available height on desktop; free space now falls between the last
row and the pagination controls rather than below them.
- Scroll the page rather than the table on mobile, while keeping horizontal
scroll inside the table for wide column sets. The footer scrolls with the
page instead of colliding with the fixed bottom nav, but stays pinned
horizontally so it cannot scroll out of view sideways.
- Wrap the footer controls: page size and actions share a row, pagination takes
its own, with nothing clipped down to 320px.
- Add a `verticalScroll` prop to replace the implicit `maxHeight="100%"` signal
for the maximized view. `maxHeight` is a plain passthrough again.
- Use `style:` directives instead of an inline `style` attribute. `stylelint
--fix` corrupts a Svelte `style` attribute that begins with an interpolation,
appending the property name on each run, which had already killed
`scroll-padding-bottom`.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
laurakwhit
changed the title
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.
Description & motivation 💭
Paginated tables now fill the available viewport height on desktop and scroll with the page on mobile
Previously
PaginatedTablesized itself withmax-height: calc(100vh - var(--layout-pt) - ${tableOffset}px), wheretableOffset = tableContainer.offsetTop + 32.offsetTopwas a plain DOM read inside$derived, so it was measured once at mount and never recomputed — not on resize, not when the filter bar wrappedto a second line.
It compared against
100vhinstead of the actual scroll container.+ 32hardcoded the desktopp-8bottom padding, which wasp-4on smaller screens.height: calc(100% - var(--table-header-h))on the empty state resolve toauto, so empty states collapsed to content height.What changed
Height comes from flexbox now, not JS. The chain from the app shell down to the table container is a definite-height flex column, so the browser does the arithmetic and reflows on resize for free.
Empty states fill the table. The original
calc()works now that the container has a definite height, and consumers'h-fullempty wrappers fill the page.Mobile scrolls the page, not the table. The table grows to its content and the page scrolls, while horizontal scroll stays inside the table for wide column sets.
Footer controls wrap. Page size and action icons share a row, pagination gets its own.
verticalScrollprop replaces the implicitmaxHeight="100%"signal for the maximized view.'table'means the body scrolls and the footer pins; the default'responsive'scrolls the page on mobile and the body frommdup.Top nav height matches its token. The nav is now sized by
--top-nav-heightinstead of the token merely describing it. This also fixes three pre-existing sticky sub-headers (workflow-history-layout,workflow-timeline-layout,workflow-family-tree) that offset by the token and were sitting 1px high, leaving a sliver of scrolled content under the nav.Inline
stylebecamestyle:directives.stylelint --fixsilently corrupts a Sveltestyleattribute that beginswith an interpolation, appending the property name on every run and killing the declaration after it. It had already eaten
scroll-padding-bottom. Any.sveltefile withstyle="{...is exposed.Known tradeoffs
stickyanchors to the nearest scrollport, and theoverflow-autowe need for horizontal scroll makes the container one.Screenshots (if applicable) 📸
Design Considerations 🎨
Testing 🧪
How was this tested 👻
Steps for others to test: 🚶🏽♂️🚶🏽♀️
Checklists
Draft Checklist
Merge Checklist
Issue(s) closed
Docs
Any docs updates needed?