shadcn-vue
shadcn-vue copied to clipboard
[Bug]: Scrollable doesn't work into DrawerContent
Reproduction
Describe the bug
Trying to implement a responsive solution that use Sheet on desktop and Drawer on mobile, but if the DrawerContent is bigger than the Drawer (80% of viewport height), the Scrollable component doesn't work ...
<Drawer v-model:open="internalOpen">
<DrawerTrigger as-child>
<slot name="trigger"/>
</DrawerTrigger>
<DrawerContent class="max-h-[90%] p-4">
<DrawerHeader>
<DrawerTitle>{{ title }}</DrawerTitle>
<DrawerDescription>{{ description }}</DrawerDescription>
</DrawerHeader>
<ScrollArea>
<slot />
</ScrollArea>
</DrawerContent>
</Drawer>
System Info
System:
OS: macOS 15.3.1
CPU: (12) arm64 Apple M2 Pro
Memory: 88.92 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.20.7 - /opt/homebrew/opt/node@18/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.8.2 - /opt/homebrew/opt/node@18/bin/npm
Browsers:
Chrome: 133.0.6943.128
Safari: 18.3
npmPackages:
@vueuse/core: ^12.7.0 => 12.7.0
vue: ^3.4.0 => 3.5.13
Contributes
- [ ] I am willing to submit a PR to fix this issue
- [ ] I am willing to submit a PR with failing tests