[Bug]: Inbox scroll area on shadcn-vue homepage Mail demo is too large and cut off

roman3000 commented 2 weeks ago

Reproduction

https://www.shadcn-vue.com/examples/mail.html

Describe the bug

The email list is cut off when you scroll to the last item. I have spent a while trying to figure out why but can't fix it. Maybe someone has some info as to how to fix it, I checked the official shad-cn site and they have the same issue, someone raised the bug and suggested a fix but i couldn't figure out how to apply it.

sc3

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz  
    Memory: 5.83 GB / 15.96 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 130.0.6723.117
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.19041.4355

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

sadeghbarati commented 1 week ago

The ScrollArea component requires a height on it, in this case, height: 100vh

Also, this happens in all shadcn-ui ports too

I couldn't fix it but modifying the 100vh to 73vh could fix the problem

roman3000 commented 1 week ago

It seems that setting the max height cuts the list off. If you remove it it's fine but the height is too big to fit on screen. I will keep an eye on this and if find a fix I will post it here. ` <ResizablePanelGroup id="resize-panel-group-1" direction="horizontal" class="h-full max-h-[800px] items-stretch"

`

unovue / shadcn-vue