fix: bottom sheet sizing on large screens

SaadBazaz · SaadBazaz · commit 325bbe3af4f8 · 2024-08-05T20:11:22.000+05:00
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" />

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export const BottomSheet: React.FC<BottomSheetProps> = ({`
`37`	`37`	}`}
`38`	`38`	`/>`
`39`	`39`	`<Drawer.Content`
`40`		- 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`}
	`40`	+ 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`}
`41`	`41`	`>`
`42`	`42`	`{_showHandle && (`
`43`	`43`	`<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" />`