fix(webkit): [ENG-47033] bound the Panel shell so its own body can scroll - #835
Merged
Conversation
herbert-julio-azion
changed the title
herbert-julio-azion
force-pushed
the
fix/ENG-47033-panel-scroll
branch
from
July 31, 2026 14:31
f47d2e3 to
16ee801
Compare
robsongajunior
previously approved these changes
Aug 3, 2026
herbert-julio-azion
changed the title
herbert-julio-azion
marked this pull request as ready for review
August 3, 2026 17:20
…erts The test covering the no-ScrollArea branch was called "renders content as a plain scrollable div when no drawer scroll host is present". It checks the tag name and the absence of the ScrollArea, and nothing about scrolling, so the name promised a guarantee the test never provided. Renamed to state the branch it verifies, with a note on why scroll is not measurable in this suite: the browser env loads no theme CSS and runs no Tailwind (see src/test/setup.ts), so the utility classes never apply and any scroll measurement here would be a false negative. Scrolling is exercised through Drawer and Dialog, the two contexts that mount this shell.
…roll The shell declared `overflow-hidden` with no height bound, so it grew to fit its content instead of clipping it, and `panel-content`'s `overflow-y-auto` never had anything to scroll. Measured inside a 400px-tall container the shell rendered 771px tall with the body not scrolling; with `max-h-full` it is 400px and the body scrolls. Dialog and Drawer already bound the panel from the outside, so this changes only the case where nothing else does. Their 45 tests pass unchanged.
herbert-julio-azion
force-pushed
the
fix/ENG-47033-panel-scroll
branch
from
August 4, 2026 13:51
64ec2c1 to
539933e
Compare
|
|
guilherme-santana-azion
approved these changes
Aug 4, 2026
robsongajunior
approved these changes
Aug 4, 2026
Merged
isaque-bock-azion
added a commit
that referenced
this pull request
Aug 5, 2026
… merges Merges f24330a/17f4244b kept the branch-side tab-view-item/list and panel shells, silently dropping main's Figma pill fix (#857) and the Panel max-h-full scroll bound (#835) while taking main's updated visual baselines — so the TabView snapshots failed CI. Restore main's semantics in the branch's canonical token syntax, and canonicalize the standalone story + spec line that came in bracketed.
isaque-bock-azion
added a commit
that referenced
this pull request
Aug 10, 2026
…nicalize v4 syntax (#849) * fix(webkit): [ENG-47001] catch the v4 paren spelling in the six token-check guardrails typography-raw-length, leading-raw, tracking-raw, font-family-raw, animate-arbitrary and motion-hardcoded keyed on a literal '[', so the canonical v4 paren syntax (duration-(--x), animate-(--x), text-(length:--x), font-(family-name:--x), leading-(--x), tracking-(--x)) walked straight through the typography / motion / animation gates. Each now matches both spellings. Regression tests pin both forms and assert the widened guards stay silent on a plain canonical token (bg-(--primary)). * refactor: [ENG-47001] adopt the canonical Tailwind v4 paren token syntax repo-wide Decision A: standardize on Tailwind v4's paren shorthand for design-token values (bg-(--primary), text-(length:--text-body-md), z-1), so IntelliSense stops flagging every styled line with suggestCanonicalClasses. The two spellings compile to byte-identical CSS. A codemod (scripts/codemods/canonicalize-tw-v4.mjs) rewrites the three safe families across packages/webkit/src, apps/storybook, .specs, packages/webkit/docs, .claude/**, cli-templates and packages/theme: A prop-[var(--x)] -> prop-(--x) (2470) B prop-[type:var(--x)] -> prop-(type:--x) (29) E z-[<int>] -> z-<int> (51) It provably leaves two families bracketed, because the paren form emits no CSS for them (silent style loss, no build or lint error): C custom-property declarations [--x:var(--y)] D expression values / var-with-fallback w-[calc(var(--a)*2)], bg-[var(--x,var(--y))] canonicalize-tw-v4.test.mjs pins the A/B/E conversions and the C/D skips. The decision is recorded in .claude/rules/styling.md and mirrored into the shipped cli-templates styling rule; DESIGN.md and the scaffolder examples teach the paren form. apps/icons-gallery (Tailwind v3) is untouched. * chore: [ENG-47001] drop the one-time codemod and strip test comments The canonicalization sweep is applied and committed, so the one-shot codemod (scripts/codemods/canonicalize-tw-v4.mjs) and its skip-proof test are no longer needed — the permanent protection is the token-check guardrail tests plus the CI visual baselines (which prove the A/B/E conversions are byte-identical). Also removes the explanatory comments from the guardrail tests. * style(webkit): [ENG-47001] run prettier on the files touched by the sweep The canonicalization changed class-string lengths, so prettier re-wraps a few :class attributes and the token-check test. Formatting only — no behavior change. * refactor: canonicalize remaining bracket var() tokens from main merges Two spots merged in from main still used the bracket syntax for fallback-less var() tokens; convert them to the parenthesis shorthand the sweep standardizes on. * fix(webkit): restore main's TabView pill and Panel height cap lost in merges Merges f24330a/17f4244b kept the branch-side tab-view-item/list and panel shells, silently dropping main's Figma pill fix (#857) and the Panel max-h-full scroll bound (#835) while taking main's updated visual baselines — so the TabView snapshots failed CI. Restore main's semantics in the branch's canonical token syntax, and canonicalize the standalone story + spec line that came in bracketed. * refactor: canonicalize remaining bracket var() tokens from main merges * fix(webkit): [ENG-47001] re-seal spec body checksums after the syntax sweep The sweep canonicalized token syntax inside spec bodies without recomputing the checksum: frontmatter, which would make the enforce-spec-exists write-gate block every affected component after merge. Recomputed mechanically with the engine's own bodyChecksum() (.claude/hooks/_lib/spec.mjs), as suggested in review. 28 of the 63 resealed specs were already mismatched on origin/main (pre-existing, unrelated to this branch); the reseal heals those too. .specs/_template.md keeps its placeholder. --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com> Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com>
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
4 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.
Closes ENG-47033.
The bug
Panelis the shellDialogandDrawerboth render their box with. It declaredoverflow-hiddenwith no height bound, so it grew to fit its content instead ofclipping it, and
panel-content'soverflow-y-autonever had anything to scroll.Measured inside a 400px-tall container: the shell rendered 771px tall with the body
not scrolling. With
max-h-fullit is 400px and the body scrolls.The change
One class on the shell:
max-h-full, which is what makes the existingoverflow-hiddenmean something.Scope, honestly
DialogandDraweralready bound the panel from the outside, so this changes onlythe case where nothing else does. There is no visible difference in either of them,
and no story to point at:
Panelis not a component a consumer reaches for directly,it is the box those two assemble. Its value here is that the shell no longer depends on
its host remembering to cap it.
The other commit renames a Panel test so its name states what it asserts (it was called
"renders content as a plain scrollable div", but the suite cannot observe scrolling: the
browser-mode setup deliberately loads no Tailwind, so any layout assertion there is a
false negative).
Verified
Panel + Dialog + Drawer: 45 tests pass. No visual baseline moved.