feat(drawer): enable drawer content scroll on overflow #2235
Conversation
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 independently This improves UX for drawers with long content by enabling proper vertical scrolling behavior without layout issues.
|
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
braden-w
changed the title
|
Does applying overflow-y-auto to the content not work as expected when you have overflowing content? |
|
@huntabyte Unfortunately not, I tried also tried the Putting 
Putting it on the 
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.
|
This change enables proper vertical scrolling for drawer components when content exceeds the drawer height, inspired by @huntabyte 's implementation in the
vaul-sveltedocs. 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 class="flex-1 overflow-y-auto">container. Theflex-1class ensures the content takes up remaining space after the drag handle at the top, whileoverflow-y-autoenables vertical scrolling.