From 93fd7d752633de742fe93bc942f18b6100cf2600 Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <khai@rul.sh>
Date: Wed, 10 Jan 2024 17:27:08 +0000
Subject: [PATCH] fix: bottomsheet responsivity

---
 src/components/ui/Sheet.tsx      | 7 +++++--
 src/pages/artworks/viewSheet.tsx | 7 ++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/Sheet.tsx b/src/components/ui/Sheet.tsx
index aedebf7..1b5558b 100644
--- a/src/components/ui/Sheet.tsx
+++ b/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>
   );
diff --git a/src/pages/artworks/viewSheet.tsx b/src/pages/artworks/viewSheet.tsx
index 5fedeb4..efca817 100644
--- a/src/pages/artworks/viewSheet.tsx
+++ b/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
-              className="hidden md:flex pl-2 md:mb-6"
-              onClick={modal.onClose}
-            >
+            <Button className="flex pl-2 mb-6" onClick={modal.onClose}>
               <ChevronLeft /> Back
             </Button>