Closed jt6677 closed 7 months ago
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.
re-commenting here for attention. @shadcn please fix the doc on the homepage 🙏
You are right, I tried to change the width but it does nothing, which is why I am here.
Is there some alternative fix on this issue ?
Help with this please, how to change the width of a sheet @shadcn
Help with this please, how to change the width of a sheet @shadcn
the solution is in the first post.
DO NOT USE
anyway, this sheet component has some super weird animation glitch on first mount. I'd use something else.
You need to declare a max width like:
<SheetContent className="xl:w-[1000px] xl:max-w-none sm:w-[400px] sm:max-w-[540px]">
...
No fix on this yet??!
No fix on this yet??! can you read??!
@shadcn Please fix this
One solution for me to work is delete sm:max-w-sm
from: sheet.tsx
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
},
},
defaultVariants: {
side: "right",
},
}
)
Impressive this is marked as closed but is acutally open and the PR mentioned isn't merged.
Official doc says
This would not work properly since sheetVariants>>right/left>>sm:max-w-sm . SheetContent needs classNames like 'sm:max-w-[750px]" to make size work.