feat(docs): give the landing table the full page width - #10
Merged
Conversation
Add a `full` prop to DemoBox and use it on the landing demo. A ten-column table confined to the 1152px prose column of a 1440px window demonstrates the container, not the component — while body text stays in its measure, because a paragraph spanning 1400px is unreadable. Break out with negative inline margins rather than width: 100vw. 100vw includes the scrollbar, so anything built on it overflows the page by exactly the scrollbar's width wherever one takes space. Clamping the expansion with max(0px, …) means the box collapses back to normal once the viewport is narrower than the container, so a phone is unaffected. Verified from 375px to 1920px: the demo fills the viewport minus its gutters at every step and the page never scrolls horizontally.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Everything below the hero sat inside the lines of the cards above it. Two causes: the markdown container caps at 1280px where the hero caps at 1152px, and it adds padding that box-sizing: border-box subtracts from that cap. content-box plus a min() clamp reconciles both, keeping the padding, which on a narrow viewport is the only gutter there is. Replace `@import 'tailwindcss' important` with a scoped revert-layer rule. important mode made every utility important, including Tailwind's own container utility — the class VitePress uses for its layout — which was silently inflating the hero and feature cards. It could not be overridden either: for important declarations the cascade reverses layer order, so a layered !important beats an unlayered one. revert-layer inside a demo box rolls each reset property back to the layered value underneath: the component's own utility where it set one, preflight's default where it did not. Verified at nine viewports from 375 to 1920: hero, feature cards and demo share both edges at every one, with no horizontal page scroll.
Complete Phase 5's content. Three pattern pages carry the composition knowledge the component pages cannot: a full data-table page ported from the playground, form validation timing with a Zod resolver, and the 150ms delay that stops a placeholder flashing on a fast response. Each has the finished thing live at the top, the real code, then the notes on why. Add contributing and roadmap pages, the Storybook nav link now that storybook.rowkit.dev is up, and a robots.txt pointing at the sitemap. Document novalidate on the forms pattern. A required Field marks its control required, which also switches on the browser's own constraint validation — so the browser blocks the submit, never fires the event, and the handler rendering your messages is unreachable. The symptom is a form that appears to do nothing. Wrap every demo block in prettier-ignore. Prettier reflows HTML inside markdown, and the blank lines it inserts terminate the markdown HTML block, turning the rest of the demo into a code block.
Inject @vercel/analytics from enhanceApp, guarded by a typeof window check because that hook runs during the static build as well as in the browser and inject() writes into document.head — unguarded it fails the build rather than the page. Installed at the workspace root: docs/ is not a workspace package here, so there is nothing for --filter docs to filter. Cookieless and free of personal data, so no consent banner. The Storybook project gets nothing — its only interesting metric is in the deploy logs.
Agents look for AGENTS.md at the repository root, and the only one here was packages/ui/AGENTS.md — which is generated, ships in the npm package, and describes how to use the components rather than how to change them. The new file disambiguates the two and points at CLAUDE.md as the authority. Record three things that are true here and not everywhere: backward compatibility matters because this is a published package with semver and changesets; the failure mode is silence rather than errors, so rendering needs verifying rather than assuming a green build; and the props tables and packages/ui/AGENTS.md are generated, so editing them by hand fails CI.
The previous fix listed the properties to revert by hand and got padding wrong. Tailwind's px-* writes padding-inline, the logical property, while the padding shorthand controls the physical longhands — and the two cascade independently. The unlayered shorthand beat the layered logical property and reverted it to preflight's zero, so every button and input came back with a correct background, a correct border and no padding at all. `all: revert-layer` reverts every property to the layered value underneath without having to know which one each utility writes. Checked what a blunt revert might take with it: the focus ring, the pointer cursor and dark mode all survive, because they come from utilities and utilities are what revert-layer reverts to. Swept all seventeen pages — axe clean, no console errors, and the only controls still bare are the ones designed that way.
Every header cell sat on the same z-sticky layer, so at equal z-index the later cells in the DOM painted over the pinned one: scrolling right slid the neighbouring header straight across the pinned column's heading while the pinned body cells below stayed put. The column kept its data and lost its name. Move the layer to the header row, which now establishes one stacking context, and order the pinned cell inside it — so the plain header cells need no z-index at all. Adds dataTableHeaderRowVariants to the exports and a structural regression test, since jsdom has no layout to assert paint order against. Raise VitePress's z-index variables in the docs theme. Its navbar sits at 20 and --z-index-sticky is 100, because that scale assumes rowkit is the page's chrome; in the docs it is the guest, so a sticky table header scrolled over the site nav. The same applies to any app embedding rowkit under a fixed header, which the DataTable page now says.
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.
Add a
fullprop to DemoBox and use it on the landing demo. A ten-column table confined to the 1152px prose column of a 1440px window demonstrates the container, not the component — while body text stays in its measure, because a paragraph spanning 1400px is unreadable.Break out with negative inline margins rather than width: 100vw. 100vw includes the scrollbar, so anything built on it overflows the page by exactly the scrollbar's width wherever one takes space. Clamping the expansion with max(0px, …) means the box collapses back to normal once the viewport is narrower than the container, so a phone is unaffected.
Verified from 375px to 1920px: the demo fills the viewport minus its gutters at every step and the page never scrolls horizontally.