fix: bottom sheet sizing on large screens

grayhatdevelopers · Aug 5, 2024 · 325bbe3 · 325bbe3
1 parent 3af19c7
commit 325bbe3
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git 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
@@ -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" />