feat: DataTable internal scrolling with pinned chrome via Layout fill#350
Draft
interacsean wants to merge 2 commits into
Draft
feat: DataTable internal scrolling with pinned chrome via Layout fill#350interacsean wants to merge 2 commits into
interacsean wants to merge 2 commits into
Conversation
interacsean
force-pushed
the
feat/1388-datatable-internal-scroll
branch
from
e59bede to
8b9e623
Compare
Implements internal scrolling for DataTable inside the AppShell layout (tailor-inc/platform-planning#1388): - Shell is now viewport-bounded (h-svh) with the content area taking over scroll duty (overflow-y-auto, full-bleed so the scrollbar sits at the window edge), so scrolling never happens on the document - New opt-in `fill` prop on Layout stretches the page to the available height and bounds the column row (grid minmax(0,1fr)) so children can scroll internally - DataTable.Root becomes a shrinkable flex column; the table container is the vertical scroll region with a sticky column header row; Toolbar and Footer stay pinned - Empty/error state height fixed at 3 rows (was pageSize-worth, creating a huge blank/scrollable region at large page sizes); message is sticky so it stays in view in height-constrained containers - Skeleton loader rows derive their height from the same structure as real rows (icon-button footprint, text line box, badge pills) so the table no longer shifts when data resolves Examples: products page uses <Layout fill> with ~200 mock rows and a 25-row default page size; new long-content page verifies content-area scrolling for pages without fill. Pattern docs (list/dense-scan) and Layout docs updated and regenerated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Once the content area has scrolled, a mask fades its top edge to transparent so content dissolves into the pinned breadcrumb rather than cutting off abruptly. Masking (rather than overlaying a matching colour) reveals the real page backdrop — which is a theme gradient with background-attachment: fixed, so no single colour could match it — making the fade seamless on every theme. Toggled by a lightweight scroll listener (re-renders only when crossing scrollTop 0), so content isn't faded at rest and pages whose content fits show nothing. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
interacsean
force-pushed
the
feat/1388-datatable-internal-scroll
branch
from
8b9e623 to
f5eaf2f
Compare
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.
Summary
Implements DataTable internal scrolling (tailor-inc/platform-planning#1388): the page title, table toolbar, column header row, and pagination footer stay visible at every viewport height — only the rows region scrolls.
datatable-scrolling.mp4
How it works (height chain, top → bottom)
SidebarProviderwrappermin-h-svh→h-svh— the shell is viewport-bounded; the document never scrollsoverflow-y-auto— regular pages scroll here nowLayoutfillprop:flex-1 min-h-0+grid-rows-[auto_minmax(0,1fr)]so the header row stays natural-height and the column row is boundedDataTable.Rootmin-h-0, noflex-1— short tables keep natural height)overflow-auto min-h-0)sticky top-0 bg-cardwith inset-shadow bottom border (Chrome drops row borders on sticky underborder-collapse)Also fixed along the way
pageSize × 53pxof height — at p=25 that was a 1325px blank region (previously a massively tall table; post-change a scrollable void). Now capped at 5 rows, with the message sticky so it stays in view in constrained containers.Examples & docs
vite-app) uses<Layout fill>with ~200 mock rows, default 25/page/dashboard/long-contentexample page (nofill) verifies content-area scrolling still works for normal pagesdocs/components/layout.mdFill Mode section;list/dense-scanpattern updated (full<Layout fill>page composition, new "Page Layout & Internal Scrolling" guidance) and skill docs regeneratedAcceptance criteria (#1388)
The AppShell layout is now viewport-bounded (
h-svh), so page content scrolls inside the content area rather than on the document. Code relying onwindow/document scroll position should target the content area instead.Test plan
Layout filltests)f.name:contains=xyzzy), 3-row state, p=10 short table — no scrollbar/stretch🤖 Generated with Claude Code