crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 06:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix layering bug

Browse Source
This commit is contained in:
StephDietz 2023-07-06 20:38:26 -05:00
parent 6c373ad58a
commit 69072195f4
1 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/cart/modal.tsx
View File

@ -93,7 +93,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
</div> </div>
) : ( ) : (
<div className="flex flex-col justify-between h-full overflow-hidden"> <div className="flex flex-col justify-between h-full overflow-hidden">
<ul className="flex-grow p-6 overflow-auto"> <ul className="flex-grow py-4 overflow-auto">
{cart.lines.map((item, i) => { {cart.lines.map((item, i) => {
const merchandiseSearchParams = {} as MerchandiseSearchParams; const merchandiseSearchParams = {} as MerchandiseSearchParams;
@ -109,40 +109,46 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
); );
return ( return (
<li key={i} data-testid="cart-item" className="flex flex-col"> <li
<Link key={i}
className="flex flex-row py-4 space-x-4" data-testid="cart-item"
href={merchandiseUrl} className="flex flex-col w-full border-b"
onClick={closeCart} >
> <div className="flex flex-row justify-between w-full py-4">
<div className="relative rounded-md border border-dark-gray-4 bg-white/[6.6%] hover:bg-white/[8.7%]"> <Link
<div className="absolute right-0 -mt-2 -mr-2"> href={merchandiseUrl}
<DeleteItemButton item={item} /> onClick={closeCart}
className="flex flex-row space-x-4"
>
<div className="relative rounded-md border border-dark-gray-4 bg-white/[6.6%] hover:bg-white/[8.7%]">
<div className="absolute right-0 -mt-2 -mr-2">
<DeleteItemButton item={item} />
</div>
<div className="w-16 h-16 overflow-hidden rounded-md cursor-pointer">
<Image
className="object-cover w-full h-full "
width={64}
height={64}
alt={
item.merchandise.product.featuredImage.altText ||
item.merchandise.product.title
}
src={item.merchandise.product.featuredImage.url}
/>
</div>
</div> </div>
<div className="w-16 h-16 overflow-hidden rounded-md cursor-pointer">
<Image
className="object-cover w-full h-full "
width={64}
height={64}
alt={
item.merchandise.product.featuredImage.altText ||
item.merchandise.product.title
}
src={item.merchandise.product.featuredImage.url}
/>
</div>
</div>
<div className="flex flex-col flex-1 text-base"> <div className="flex flex-col flex-1 text-base">
<span className="leading-tight"> <span className="leading-tight">
{item.merchandise.product.title} {item.merchandise.product.title}
</span> </span>
{item.merchandise.title !== DEFAULT_OPTION ? ( {item.merchandise.title !== DEFAULT_OPTION ? (
<p className="font-semibold " data-testid="cart-product-variant"> <p className="font-semibold " data-testid="cart-product-variant">
{item.merchandise.title} {item.merchandise.title}
</p> </p>
) : null} ) : null}
</div> </div>
</Link>
<div className="flex flex-col justify-between h-16"> <div className="flex flex-col justify-between h-16">
<Price <Price
className="flex flex-col justify-between space-y-2 text-sm" className="flex flex-col justify-between space-y-2 text-sm"
@ -157,7 +163,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
<EditItemQuantityButton item={item} type="plus" /> <EditItemQuantityButton item={item} type="plus" />
</div> </div>
</div> </div>
</Link> </div>
</li> </li>
); );
})} })}