diff --git a/src/theme/drawer.ts b/src/theme/drawer.ts
index 82956759..14b3e1ed 100644
--- a/src/theme/drawer.ts
+++ b/src/theme/drawer.ts
@@ -39,7 +39,7 @@ export default {
   }, {
     direction: ['right', 'left'],
     class: {
-      content: 'inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden',
+      content: 'inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden',
       handle: 'h-12 w-1.5 mt-auto mb-auto'
     }
   }]
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index c51097b4..5bf16b67 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer.spec.ts.snap
@@ -159,7 +159,7 @@ exports[`Drawer > renders with left direction correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden">
   <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -181,7 +181,7 @@ exports[`Drawer > renders with right direction correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden">
   <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">