This change enables proper vertical scrolling for drawer components when content exceeds the drawer height, inspired by@huntabyte 'simplementation in thevaul-svelte docs. Previously, drawers with long content could overflow without proper scrolling behavior, making it difficult for users to access all content and resulting in poor mobile UX.

To accomplish this, I wrapped the{@render children?.()} in a<div> container. Theflex-1 class ensures the content takes up remaining space after the drag handle at the top, whileoverflow-y-auto enables vertical scrolling.

feat(drawer): wrap drawer content in scrollable container

403a467

Add scrollable wrapper div around drawer children that:- Uses flex-1 to take remaining space after the fixed drag handle- Uses overflow-y-auto to enable vertical scrolling when content exceeds drawer height- Maintains the drag handle as fixed at the top while content scrolls independentlyThis improves UX for drawers with long content by enabling proper verticalscrolling behavior without layout issues.

Copy link

changeset-botbot commentedJul 22, 2025

⚠️ No Changeset found

Latest commit:403a467

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go.If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

Contributor

github-actionsbot commentedJul 22, 2025•
edited
Loading

built withRefined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
shadcn-svelte	✅ Ready (View Log)	Visit Preview	`403a467`

github-actionsbotdeployed toPreview

July 22, 2025 17:17

View deployment

braden-w changed the title~~feat(drawer): wrap drawer content in scrollable container~~feat(drawer): enable drawer content scroll on overflow

Jul 22, 2025

Copy link

Owner

huntabyte commentedJul 24, 2025

Does applying overflow-y-auto to the content not work as expected when you have overflowing content?

Copy link

ContributorAuthor

braden-w commentedJul 24, 2025•
edited
Loading

@huntabyte Unfortunately not, I tried also tried theoverflow-auto code onto theDrawer.Content component, but it doesn't scroll properly, seems to overflow with a ton of random whitespace. You can look into the StackBlitzhere and try moving theoverflow-auto class from the div into theDrawer.Content.

Puttingoverflow-auto on the inner div:

Putting it on theDrawer.Content. Notice the extra whitespace and how it's suddenly much taller.

Not sure if this is what's happening, but it seems like it's simultaneously adding a scroll bar because there's not enough space, but it also is taller, giving it more space than necessary compared to the previously computed amount of scrollthat would be needed. And so the scroll bar now has a bunch of extra white space to scroll into.

It's unclear to me if the change I propose is the best course of action, though.

Should we always wrap with thediv andoverflow-y-auto?
At the same time, maybe a code example in the docs would suffice so they know how to handle overflow?
Maybe this is something we should fix invaul-svelte?

Labels

None yet

Movatterモバイル変換

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(drawer): enable drawer content scroll on overflow#2235

Are you sure you want to change the base?

feat(drawer): enable drawer content scroll on overflow#2235

Uh oh!

Conversation

braden-w commentedJul 22, 2025•
edited
Loading

Uh oh!