Improve cart scaling on mobile & tablet

"Continue to Checkout" button no longer exceeds screen width on mobile. Drawer-style cart kicks in at 768px width rather than 1024px.
teacaps · Nov 14, 2023 · 2e2882e · 2e2882e
1 parent 2146b66
commit 2e2882e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/components/cart/CartCheckout.client.tsx b/src/components/cart/CartCheckout.client.tsx
@@ -17,12 +17,12 @@ export function CartCheckout() {
 					</span>
 				)}
 				<span className="flex w-full items-center justify-between leading-7">
-					<span className="text-walnut-80">Shipping & taxes</span>
+					<span className="text-walnut-80">Shipping</span>
 					<span className="font-medium text-walnut">Calculated at checkout</span>
 				</span>
 			</div>
-			<ButtonLink url={checkoutUrl!} className="w-full max-w-xl" color="matcha">
-				Continue to Checkout
+			<ButtonLink url={checkoutUrl!} className="w-full" color="matcha">
+				Checkout
 			</ButtonLink>
 		</div>
 	);

diff --git a/src/components/cart/CartContents.client.tsx b/src/components/cart/CartContents.client.tsx
@@ -7,8 +7,8 @@ export function CartContents() {
 	const { lines } = useCart();
 	if (!lines.length) return <CartEmpty />;
 	return (
-		<form className="flex h-full flex-col justify-between">
-			<section className="mx-12 overflow-auto border-t border-t-matcha-40 pb-4 pt-6">
+		<form className="flex h-full flex-col">
+			<section className="mx-12 mb-auto flex-grow overflow-auto border-t border-t-matcha-40 pb-4 pt-6">
 				<ul className="grid gap-8 overflow-y-auto">
 					{lines.map((line) => (
 						<CartLineProvider key={line.id} line={line}>
@@ -17,7 +17,7 @@ export function CartContents() {
 					))}
 				</ul>
 			</section>
-			<section className="absolute bottom-0 w-full px-12 pb-8">
+			<section className="w-full max-w-[100vw] px-12 pb-8">
 				<h2 className="sr-only">Cart summary</h2>
 				<CartCheckout />
 			</section>

diff --git a/src/components/elements/Drawer.tsx b/src/components/elements/Drawer.tsx
@@ -39,7 +39,7 @@ export function Drawer({
 								leave="transform transition ease-in-out duration-500 sm:duration-700"
 								leaveFrom="translate-0"
 								leaveTo="translate-x-full">
-								<Dialog.Panel className="h-screen w-screen min-w-[40ch] transform bg-grain text-left align-middle shadow-md transition-all lg:w-auto lg:max-w-lg">
+								<Dialog.Panel className="flex h-screen w-screen min-w-[40ch] transform flex-col bg-grain text-left align-middle shadow-md transition-all md:w-auto md:max-w-md lg:max-w-lg">
 									<header className="sticky top-0 flex w-screen items-center justify-between px-8 py-6 md:w-full md:justify-center md:px-12">
 										{(title || null) && (
 											<h2 className="font-medium text-matcha text-lg">{title}</h2>
@@ -48,7 +48,7 @@ export function Drawer({
 											<XIcon className="h-8 w-8 text-matcha" />
 										</button>
 									</header>
-									<div className="grid h-full w-screen md:w-unset">
+									<div className="w-screen flex-grow md:w-unset">
 										<Dialog.Title className="sr-only">Cart</Dialog.Title>
 										{children}
 									</div>