Sheet component demo on mobile layout faulty

[vincentdorian]

Hiya 👋

When opening the sheet demo on mobile, the sheet demo due to the defined size: sm does get a width: w-1/4, however this is not responsive of mobile anymore as can be seen in the video.

https://github.com/shadcn/ui/assets/60883844/2798928f-d63c-466f-8cf1-557eed517cc7

Solution:

As in production you would probably use two different components for this, part of the application, the demo could simply use two Sheet components, one for mobile, the other for desktop view.

Cheers!

[FelipeJz]

The exact temp solution i use. I think it will be complex to set up the current animation with tailwind breakpoints, but it is

[rexfordessilfie]

Hey all! I dug into @shadcn's implementation and stumbled upon size="content" which looks to make sure that the sheet content fills available screen space on smaller-width screens for each orientation.

In the demo for example, changing size="default" to size="content" on the <SheetContent /> should resolve the issue for the left/right orientation.

Code

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent position="right" size="content"> {/* This should be "content" to be fully responsive */}
...
}

Note In very small-width devices, the sheet content just fills all available width. If this is not desired, I suspect it could be tweaked to leave small room which is a percentage of the viewport width/height by supplying your own "max-w-[...]" classname to the <SheetContent />.

Screenshots

Full-screen

Small screen

[Return-1]

Another approach would be to make it appear from the bottom when mobile which makes more sense for most use cases 🙏

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.