From 325bbe3af4f85bc276539463568d550598c585b9 Mon Sep 17 00:00:00 2001
From: "Saad A. Bazaz" <saadbazaz@hotmail.com>
Date: Mon, 5 Aug 2024 20:11:22 +0500
Subject: [PATCH] fix: bottom sheet sizing on large screens

---
 packages/ui/package.json        | 1 +
 packages/ui/src/sheet/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 77d6e5f..ba10687 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,6 +2,7 @@
   "name": "material-web-components-react",
   "version": "0.3.7",
   "author": "Grayhat Team",
+  "type": "module",
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/ui/src/sheet/index.tsx b/packages/ui/src/sheet/index.tsx
index 1249bfc..0d914c9 100644
--- a/packages/ui/src/sheet/index.tsx
+++ b/packages/ui/src/sheet/index.tsx
@@ -37,7 +37,7 @@ export const BottomSheet: React.FC<BottomSheetProps> = ({
           }`}
         />
         <Drawer.Content
-          className={`bg-zinc-100 flex flex-col overflow-hidden !rounded-t-[2rem] mt-24 fixed bottom-0 m-auto left-0 right-0 sm:max-w-[640px] w-full sm:px-14 px-6`}
+          className={`fixed inset-x-0 bottom-0 m-auto mt-24 flex w-full flex-col overflow-hidden !rounded-t-[2rem] bg-zinc-100 px-6 sm:max-w-screen-sm sm:px-14`}
         >
           {_showHandle && (
             <div className="w-12 h-1.5 rounded-full bg-zinc-300 cursor-grab active:cursor-grabbing flex flex-col items-center justify-center mx-auto mt-6 mb-2" />