style(shop): cart panel instead of full-height drawer

Floats in the top-right corner below the navbar as a rounded panel
instead of a full-height sheet anchored to the viewport edge. Grows
in height with content up to max-h viewport, scrolls internally when
it overflows. Lighter overlay (20% vs 40%) since a panel feels less
modal than a full drawer.

Author: tannerlinsley

src/components/shop/CartDrawer.tsx

@@ -28,35 +28,40 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
       <Dialog.Portal>
         <Dialog.Overlay
           className={twMerge(
-            'fixed inset-0 z-[100] bg-black/40',
+            'fixed inset-0 z-[100] bg-black/20',
             'data-[state=open]:animate-in data-[state=open]:fade-in-0',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
           )}
         />
         <Dialog.Content
           className={twMerge(
-            'fixed right-0 top-0 bottom-0 z-[100] w-full sm:max-w-md flex flex-col',
-            'bg-white dark:bg-gray-950 shadow-xl border-l border-gray-200 dark:border-gray-800',
-            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',
-            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',
+            'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
+            'w-[calc(100vw-2rem)] sm:w-[24rem]',
+            'max-h-[calc(100dvh-var(--navbar-height,56px)-1rem)]',
+            'flex flex-col',
+            'rounded-xl shadow-2xl',
+            'bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800',
+            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right-5 data-[state=open]:fade-in-0',
+            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-5 data-[state=closed]:fade-out-0',
+            'duration-200',
           )}
           aria-describedby={undefined}
         >
-          <header className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
-            <Dialog.Title className="font-semibold">
+          <header className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800">
+            <Dialog.Title className="font-semibold text-sm">
               Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
             </Dialog.Title>
             <Dialog.Close
-              className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
+              className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
               aria-label="Close cart"
             >
-              <X className="w-4 h-4" />
+              <X className="w-3.5 h-3.5" />
             </Dialog.Close>
           </header>
 
           {hasLines ? (
             <>
-              <ul className="flex-1 overflow-y-auto px-6 divide-y divide-gray-200 dark:divide-gray-800">
+              <ul className="overflow-y-auto px-5 divide-y divide-gray-200 dark:divide-gray-800">
                 {cart.lines.nodes.map((line) => (
                   <DrawerCartLine
                     key={line.id}