fix: bottomsheet responsivity

src/components/ui/Sheet.tsx

@@ -142,14 +142,17 @@ const Sheet = ({
 }: SheetProps) => {
   return (
     <SheetRoot open={isOpen} {...props}>
-      <SheetContent side={position} className={cn("rounded-t-2xl", className)}>
+      <SheetContent
+        side={position}
+        className={cn("flex flex-col gap-0 rounded-t-2xl", className)}
+      >
         <SheetHeader>
           {title ? <SheetTitle>{title}</SheetTitle> : null}
           {description ? (
             <SheetDescription>{description}</SheetDescription>
           ) : null}
         </SheetHeader>
-        <div className="h-[calc(100dvh-60px)] overflow-y-auto">{children}</div>
+        <div className="flex-1 overflow-y-auto">{children}</div>
       </SheetContent>
     </SheetRoot>
   );

src/pages/artworks/viewSheet.tsx

@@ -24,7 +24,7 @@ const ViewSheet = ({ modal }: Props) => {
       {...modal}
       title="View Item"
       position="bottom"
-      className="rounded-t-none max-h-auto h-screen"
+      className="md:rounded-t-none h-[90vh] md:h-screen"
     >
       {isLoading ? (
         <div className="min-h-[320px] flex flex-col items-center justify-center text-center">
@@ -48,10 +48,7 @@ const ViewSheet = ({ modal }: Props) => {
           </div>
 
           <div className="md:w-1/3 border-t md:border-l md:border-t-0 py-4 md:pt-0 px-4 lg:px-8 overflow-y-auto">
-            <Button
+            <Button className="flex pl-2 mb-6" onClick={modal.onClose}>
-              className="hidden md:flex pl-2 md:mb-6"
-              onClick={modal.onClose}
-            >
               <ChevronLeft /> Back
             </Button>