From c05bdec252e43a2785ad0c84be23328768607a9f Mon Sep 17 00:00:00 2001
From: yohlo <yohlerkyle@gmail.com>
Date: Tue, 25 Aug 2026 22:59:00 -0700
Subject: [PATCH] fix(sheet): native scroll container so vaul drag detection
 works

---
 src/components/sheet/sheet.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/sheet/sheet.tsx b/src/components/sheet/sheet.tsx
index 99494c4..96905d3 100644
--- a/src/components/sheet/sheet.tsx
+++ b/src/components/sheet/sheet.tsx
@@ -9,7 +9,7 @@ import {
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Drawer from "./drawer";
 import Modal from "./modal";
-import { ScrollArea, Flex, Loader } from "@mantine/core";
+import { Box, Flex, Loader } from "@mantine/core";
 
 interface SheetProps extends PropsWithChildren {
   title?: string;
@@ -60,14 +60,19 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
           <Loader size='lg' />
         </Flex>
       }>
-        <ScrollArea.Autosize
-          style={{ flex: 1, maxHeight: '75dvh' }}
-          scrollbarSize={8}
-          scrollbars="y"
-          type="scroll"
+        {/* Native overflow, not ScrollArea: vaul's drag-vs-scroll detection
+            only recognizes natively scrollable elements. */}
+        <Box
+          style={{
+            flex: 1,
+            maxHeight: "75dvh",
+            overflowY: "auto",
+            overscrollBehavior: "contain",
+            WebkitOverflowScrolling: "touch",
+          }}
         >
           {children}
-        </ScrollArea.Autosize>
+        </Box>
       </Suspense>
     </SheetComponent>
   );