shadcn-vue icon indicating copy to clipboard operation
shadcn-vue copied to clipboard

[Bug]: Scrollable doesn't work into DrawerContent

Open BnitoBzh opened this issue 9 months ago • 0 comments

Reproduction

Reproduction on stackblitz

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

BnitoBzh avatar Feb 27 '25 19:02 BnitoBzh