feat(quill): add viewportClassName to DialogBody - #70445
Conversation
Forwards to the ScrollArea's existing viewportClassName so consumers can style the dialog's scroll-area-viewport (for example viewportClassName="p-0" to drop the default body padding for full-bleed content) without a custom render override. Generated-By: PostHog Code Task-Id: e599f64a-42ae-46b2-a1d0-e77b10698c09
🤖 CI report✅ Bundle size — no changeUncompressed size of every built Total: 64.34 MiB · no change No file changed by more than 1000 B. Posted automatically by build-bundle-size-report · uncompressed bytes from dist-report ✅ Eager graph — within budgetHow much code each root ships on the eager path — downloaded and parsed before the surface is interactive. Measured from the esbuild output chunks (post-tree-shake, static imports only); lazy
🟢 Largest files eagerly shipped from
|
| Size | File |
|---|---|
| 126.8 KiB | ../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js |
| 24.6 KiB | ../node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js |
| 6.3 KiB | ../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react.production.min.js |
| 4.5 KiB | ../node_modules/.pnpm/@jspm+core@2.1.0/node_modules/@jspm/core/nodelibs/browser/process.js |
| 3.9 KiB | ../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.production.min.js |
| 1.4 KiB | ../node_modules/.pnpm/base64-js@1.5.1/node_modules/base64-js/index.js |
| 1.3 KiB | src/RootErrorBoundary.tsx |
| 912 B | ../node_modules/.pnpm/ieee754@1.2.1/node_modules/ieee754/index.js |
| 789 B | src/scenes/ChunkLoadErrorBoundary.tsx |
| 668 B | src/index.tsx |
Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx
| Size | File |
|---|---|
| 278.6 KiB | ../node_modules/.pnpm/posthog-js@1.399.2/node_modules/posthog-js/dist/rrweb.js |
| 267.7 KiB | ../node_modules/.pnpm/@posthog+icons@0.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 234.9 KiB | src/taxonomy/core-filter-definitions-by-group.json |
| 221.5 KiB | ../node_modules/.pnpm/posthog-js@1.399.2/node_modules/posthog-js/dist/module.js |
| 164.0 KiB | src/queries/validators.js |
| 154.3 KiB | ../node_modules/.pnpm/re2js@0.4.1/node_modules/re2js/build/index.esm.js |
| 126.8 KiB | ../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js |
| 105.9 KiB | src/lib/api.ts |
| 93.3 KiB | ../node_modules/.pnpm/prosemirror-view@1.40.1/node_modules/prosemirror-view/dist/index.js |
| 90.6 KiB | ../node_modules/.pnpm/@tiptap+core@3.20.6_@tiptap+pm@3.20.6/node_modules/@tiptap/core/dist/index.js |
Posted automatically by check-eager-graph · sizes are eager output bytes (shipped, post-tree-shake) from the esbuild metafile · part of #32479
⚠️ Dist folder size — 🔺 +1.1 KiB (+0.0%)
Total size of the built frontend/dist folder (all assets), compared against the base branch.
Total: 1279.92 MiB · 🔺 +1.1 KiB (+0.0%)
|
Reviews (1): Last reviewed commit: "feat(quill): add viewportClassName to Di..." | Re-trigger Greptile |
![stamphog[bot]](https://avatars.githubusercontent.com/in/3000332?s=60&v=4){kind=small}
There was a problem hiding this comment.
Small, additive, backward-compatible prop on a design-system component plus docs and a story — no risky territory touched, and the author has STRONG familiarity with this exact code.
- Author wrote 100% of the modified lines and has 37 merged PRs in these paths (familiarity STRONG).
- 👍 on the PR from greptile-apps[bot], hex-security-app[bot].
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 47L, 2F substantive, 51L/3F incl. docs/generated/snapshots — within ceiling |
| tier | ✓ | T1-agent / T1b-small (51L, 3F, single-area, feat) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ dea402e · reviewed head 4aa686f |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
2 participants
Problem
There's no clean way to style the scrollable viewport inside a quill dialog (the element with
data-slot="scroll-area-viewport").DialogBodydefaults itsrenderto aScrollArea, and anyclassNameyou pass lands on the scroll-area root, not the viewport that actually scrolls. The dialog CSS also hard-codes1rempadding on that viewport, so opting into full-bleed content (an embedded list, a table) meant reaching for the verboserender={<ScrollArea viewportClassName="…" />}escape hatch.Why: consumers need the dialog's scroll viewport to accept a class (for example to drop the default padding), without dropping down to a custom
render.Changes
viewportClassNameprop toDialogBody, forwarded to theScrollArea's existingviewportClassName. So<DialogBody viewportClassName="p-0">now styles thescroll-area-viewportdirectly.FullBleedBodyStorybook story demonstrating the padding override.AGENTS.mdDialog section.Backward compatible: the prop is optional and defaults to
undefined, so existing dialogs render identically. It's a pure pass-through (same nameScrollAreaalready exposes) and is ignored when a customrenderis supplied, since those consumers already control theScrollArea.How did you test this code?
@posthog/quill-primitives(vite build, which emits.d.ts), so the new prop and its forwarding typecheck cleanly.tsc --noEmitover the packagesrc:dialog.tsxanddialog.stories.tsxare clean (the only errors are pre-existing and unrelated, inprogress.stories.tsx).FullBleedBodystory is added so a reviewer (or the visual-regression suite) can confirm thep-0viewport renders edge to edge while the default stories are unchanged.Automatic notifications
Docs update
Component reference updated in-repo (
packages/quill/packages/primitives/AGENTS.md). No posthog.com docs affected.🤖 Agent context
Autonomy: Human-driven (agent-assisted)
Adam directed this; I (Claude, via PostHog Code) implemented it.
Key decision: the prop lives on
DialogBody, notDialogContent.DialogContentonly renders its children plus the close button and never owns a scroll area, whereasDialogBody's defaultrenderis theScrollAreathat produces thescroll-area-viewport. Named itviewportClassNameto match the prop it forwards to onScrollArea, keeping the API consistent. Both the target and the name were confirmed with the requester.Also considered doing nothing, since
<DialogBody render={<ScrollArea viewportClassName="…" />}>already works today. Chose to add the shorthand because the render override is verbose for what's a common need. No repo skills were required for this change.Created with PostHog Code