feat(F-059): completed feature

project/frontend/src/components/cart/CartPageContent.tsx

@@ -12,10 +12,18 @@ function CartItemRow({ item }: { item: CartItem }) {
 
   return (
     <div className="flex gap-4 py-4 border-b border-gray-100 last:border-0">
-      {/* Image */}
-      <div className="w-20 h-20 bg-gray-50 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
+      {/* Image: bounded box (80x112 max, 5:7 ratio matching the backend
+          thumbnail). The image preserves its source aspect ratio via
+          `object-contain` so non-square images are not cropped. */}
+      <div className="w-20 max-h-28 bg-gray-50 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
         {item.imageUrl ? (
-          <Image src={item.imageUrl} alt={item.productName} width={80} height={80} className="object-cover" />
+          <Image
+            src={item.imageUrl.replace('/uploads/', '/uploads/40/')}
+            alt={item.productName}
+            width={80}
+            height={112}
+            className="object-contain"
+          />
         ) : (
           <span className="text-3xl">🌿</span>
         )}