fix(scroll-area): add max-h-[inherit] to viewport to fix max-height s…

[YassineJlassi123]

Linked issue

Related to upstream issues:

• Scroll Area doesn't work with css max-height radix-ui/primitives#2307
• Scroll Area cannot scroll when provided with max-height and no height radix-ui/primitives#1735
• The content in ScrollArea doesn't scroll when using max-height shadcn-ui/ui#296
• when using scrollarea h-fit and max-h the scroll area doesn't allow the user to scroll. shadcn-ui/ui#6659

Type of change

• Bug fix (a non-breaking change that fixes an issue)

Description

ScrollArea doesn't scroll when the root has a max-height constraint (e.g. max-h-96) instead of an explicit height.

The ScrollAreaViewport has size-full which sets height: 100%. In CSS, height: 100% resolves against the parent's
explicit height property, not max-height. So when the root only has max-height, the viewport grows to its content size
and never scrolls.

Fix: Add max-h-[inherit] to the ScrollAreaViewport. This makes the viewport inherit the root's max-height constraint,
so overflow-y: scroll activates correctly. height: 100% continues to work for explicit height cases.

Reproduction:



Without fix: content overflows outside the popover, no scrolling. With fix: scrolls correctly.

N/A — reproducible with any ScrollArea using max-h-* instead of h-*.

Summary by CodeRabbit

• Bug Fixes
  • Fixed scroll-area viewport sizing so it properly inherits and respects parent max-height constraints, preventing unintended overflow and ensuring consistent scrolling behavior and layout stability across affected UI components.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1678b4a0-b4a9-4ec7-9538-8345f42e663e

📥 Commits

Reviewing files that changed from the base of the PR and between df12d11 and 32b35b3.

📒 Files selected for processing (1)

• apps/v4/registry/bases/reka/ui/scroll-area/ScrollArea.vue

✅ Files skipped from review due to trivial changes (1)

• apps/v4/registry/bases/reka/ui/scroll-area/ScrollArea.vue

---

📝 Walkthrough

Walkthrough

Added the Tailwind class max-h-[inherit] to the ScrollAreaViewport in two ScrollArea.vue files, constraining the viewport's maximum height to the parent's inherited max-height. No logic or exported signatures were changed.

Changes

Cohort / File(s)	Summary
Scroll Area Styling apps/v4/registry/new-york-v4/ui/scroll-area/ScrollArea.vue, apps/v4/registry/bases/reka/ui/scroll-area/ScrollArea.vue	Inserted max-h-[inherit] into the class attribute of ScrollAreaViewport to make the viewport respect the parent's inherited max-height; whitespace/line-ending adjustments only.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

I hop through code with nimble feet,
A tiny class makes layout neat.
Max height follows parent's line,
The scroll fits cozy — all is fine. 🐇✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding max-h-[inherit] to the scroll-area viewport. It directly addresses the fix for a max-height constraint issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/v4/registry/new-york-v4/ui/scroll-area/ScrollArea.vue`:
- Line 26: The bases/reka ScrollArea variant is missing the max-h-[inherit] fix;
update the ScrollAreaViewport element in the ScrollArea.vue component (the same
class attribute that currently includes "focus-visible:ring-ring/50 size-full
rounded-[inherit] transition-[color,box-shadow] outline-none
focus-visible:ring-[3px] focus-visible:outline-1") to also include
"max-h-[inherit]" so it matches the new-york-v4 variant and restores proper
max-height scrolling behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bd92224c-fb5d-4e3d-8755-734f846140e3

📥 Commits

Reviewing files that changed from the base of the PR and between e005af9 and df12d11.

📒 Files selected for processing (1)

• apps/v4/registry/new-york-v4/ui/scroll-area/ScrollArea.vue