From b3f02d8017d6500f2afdca80aab2207185c8bb0d Mon Sep 17 00:00:00 2001
From: Yuto Takano <moa17stock@gmail.com>
Date: Mon, 2 Dec 2024 15:41:27 +0100
Subject: [PATCH] Use 2:1 aspect ratio for shop items on smaller screens to
 make description fit

---
 src/components/Shop.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Shop.tsx b/src/components/Shop.tsx
index 507a502..c053df8 100644
--- a/src/components/Shop.tsx
+++ b/src/components/Shop.tsx
@@ -43,23 +43,23 @@ export const Shop: FunctionComponent<ShopProps> = ({ shop_items, className }) =>
           </button>
         </div>
       )}
-      <ul className="grid grid-cols-2 grid-rows-3 md:grid-cols-3 xl:grid-cols-4 xl:grid-rows-2 gap-4">
+      <ul className="grid grid-cols-2 grid-rows-3 md:grid-cols-4 xl:grid-rows-2 gap-4 mb-4">
         {shop_items.map((item, i) => (
-          <li key={item.id} className={(i % 3 == 0 ? "bg-christmasGreen" : i % 3 == 1 ? "bg-christmasRed" : "bg-christmasDark") + " transform-gpu overflow-hidden rounded-xl group relative flex flex-col aspect-square " + (i == 0 ? "row-span-2 col-span-2" : "row-span-1 col-span-1")}>
-            <img src={item.image_url} alt={item.name} className="[mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105 transition-all duration-150" />
+          <li key={item.id} className={(i % 3 == 0 ? "bg-christmasGreen" : i % 3 == 1 ? "bg-christmasRed" : "bg-christmasDark") + " transform-gpu overflow-hidden rounded-xl group relative flex flex-col " + (i == 0 ? "row-span-2 col-span-2 aspect-square" : "row-span-1 col-span-2 aspect-[2] xl:col-span-1 xl:aspect-square")}>
+            <img src={item.image_url} alt={item.name} className="[mask-image:linear-gradient(to_top,transparent_00%,#000_100%)] group-hover:scale-105 transition-all duration-150" />
             <div className="absolute top-0 right-0 text-white p-2 bg-black bg-opacity-50 rounded-bl-xl">
               {item.remaining_count}
               {" "}
               in stock
             </div>
-            <div className="absolute bottom-0 flex transform-gpu flex-col gap-1 p-6 transition-all duration-150 group-hover:-translate-y-10 w-full">
+            <div className="absolute bottom-0 flex transform-gpu flex-col gap-1 p-4 transition-all duration-150 group-hover:-translate-y-12 w-full">
               <h3 className="text-xl font-semibold text-white">
                 {item.name}
               </h3>
               <p className="max-w-lg text-white">{item.description}</p>
             </div>
             <div
-              className="absolute bottom-0 w-full translate-y-10 transform-gpu flex justify-between items-center p-6 opacity-0 transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
+              className="absolute bottom-0 w-full translate-y-10 transform-gpu flex justify-between items-center p-4 opacity-0 transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
             >
               <Stars amount={item.star_cost} className="text-christmasBeige" />
               <fetcher.Form method="post" action="shop/purchase">