From 94ea44c66e43eae24f3cc8dd3e8a1d2e4cb98040 Mon Sep 17 00:00:00 2001
From: yohlo <yohlerkyle@gmail.com>
Date: Tue, 23 Sep 2025 15:04:29 -0500
Subject: [PATCH] drawer fixes

---
 src/components/sheet/drawer.tsx        | 28 ++++++++++++++++++++++----
 src/components/sheet/sheet.tsx         |  4 ++--
 src/components/sheet/styles.module.css |  5 ++++-
 src/components/swipeable-tabs.tsx      |  2 +-
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/sheet/drawer.tsx b/src/components/sheet/drawer.tsx
index 24cb70f..86b08f8 100644
--- a/src/components/sheet/drawer.tsx
+++ b/src/components/sheet/drawer.tsx
@@ -1,8 +1,7 @@
 import { Box, Container, Flex, Loader, useComputedColorScheme } from "@mantine/core";
-import { PropsWithChildren, Suspense, useEffect } from "react";
+import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import styles from "./styles.module.css";
-import FullScreenLoader from "../full-screen-loader";
 
 interface DrawerProps extends PropsWithChildren {
   title?: string;
@@ -17,6 +16,7 @@ const Drawer: React.FC<DrawerProps> = ({
   onChange,
 }) => {
   const colorScheme = useComputedColorScheme("light");
+  const contentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const appElement = document.querySelector(".app") as HTMLElement;
@@ -59,11 +59,31 @@ const Drawer: React.FC<DrawerProps> = ({
     };
   }, [opened, colorScheme]);
 
+  useEffect(() => {
+    if (!opened || !contentRef.current) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (contentRef.current) {
+        const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
+        if (drawerContent) {
+          (drawerContent as HTMLElement).style.height = 'auto';
+          (drawerContent as HTMLElement).offsetHeight;
+        }
+      }
+    });
+
+    resizeObserver.observe(contentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [opened, children]);
+
   return (
     <VaulDrawer.Root open={opened} onOpenChange={onChange}>
       <VaulDrawer.Portal>
         <VaulDrawer.Overlay className={styles.drawerOverlay} />
-        <VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer">
+        <VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
           <Container flex={1} p="md">
             <Box
               mb="sm"
@@ -74,7 +94,7 @@ const Drawer: React.FC<DrawerProps> = ({
               mr="auto"
               style={{ borderRadius: "9999px" }}
             />
-            <Container mah="fit-content" mx="auto" maw="28rem" px={0}>
+            <Container mx="auto" maw="28rem" px={0}>
               <VaulDrawer.Title>{title}</VaulDrawer.Title>
               <Suspense fallback={
                 <Flex justify='center' align='center' w='100%' h={400}>
diff --git a/src/components/sheet/sheet.tsx b/src/components/sheet/sheet.tsx
index 5f18216..fbf7eba 100644
--- a/src/components/sheet/sheet.tsx
+++ b/src/components/sheet/sheet.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren, useCallback } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Drawer from "./drawer";
 import Modal from "./modal";
-import { Box, ScrollArea } from "@mantine/core";
+import { ScrollArea } from "@mantine/core";
 
 interface SheetProps extends PropsWithChildren {
   title?: string;
@@ -29,7 +29,7 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
         scrollbars="y"
         type="scroll"
       >
-        <Box mah="70vh">{children}</Box>
+        {children}
       </ScrollArea>
     </SheetComponent>
   );
diff --git a/src/components/sheet/styles.module.css b/src/components/sheet/styles.module.css
index 90179a3..f5f82d7 100644
--- a/src/components/sheet/styles.module.css
+++ b/src/components/sheet/styles.module.css
@@ -11,10 +11,13 @@
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     margin-top: 24px;
-    height: fit-content;
+    height: auto !important;
+    min-height: fit-content;
+    max-height: 100dvh;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     outline: none;
+    transition: height 0.2s ease-out;
 }
diff --git a/src/components/swipeable-tabs.tsx b/src/components/swipeable-tabs.tsx
index 292e446..c2e3a3d 100644
--- a/src/components/swipeable-tabs.tsx
+++ b/src/components/swipeable-tabs.tsx
@@ -107,7 +107,7 @@ function SwipeableTabs({
     const activeSlideRef = slideRefs.current[activeTab];
     if (!activeSlideRef) return;
 
-    let timeoutId: number;
+    let timeoutId: any;
     const resizeObserver = new ResizeObserver(() => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(updateHeight, 16);