From 229999fa5a590e85cae3e84afe543d1096d8df12 Mon Sep 17 00:00:00 2001 From: Cristian Felipe Cruz Buitron Date: Fri, 28 Aug 2026 19:36:37 +0000 Subject: [PATCH] fix(ecommerce): tiles con foto - la imagen llena la tarjeta (object-cover) Reportado en produccion: con object-contain + margenes grandes (inset-x-6 top-6 bottom-24) la foto quedaba chica y centrada, con mucho espacio muerto del pastel alrededor -- no se parecia a la referencia real de Walmart que mando el usuario, donde la foto aprovecha casi toda la tarjeta. Cambia a object-cover (recorta en vez de contener) dentro de un marco mas delgado (inset-3 en vez de inset-x-6/top-6), dejando solo un margen fino del pastel visible como marco alrededor de la foto. --- .../ecommerce/components/home/category-tiles.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/workloads/ecommerce/components/home/category-tiles.tsx b/workloads/ecommerce/components/home/category-tiles.tsx index 9b70f32..1639b96 100644 --- a/workloads/ecommerce/components/home/category-tiles.tsx +++ b/workloads/ecommerce/components/home/category-tiles.tsx @@ -37,15 +37,14 @@ export function PromoTile({ category, className = "" }: { category: Category; cl href={`/catalog?category=${encodeURIComponent(category.name)}`} className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] ${content.color} shadow-sm ring-1 ring-slate-900/5`, className)} > - {/* Patron real de Walmart (confirmado con referencia del usuario): - la foto NO cubre la tarjeta completa -- flota, contenida, sobre - el fondo pastel solido, igual que las tarjetas sin foto. Un - intento anterior con la foto a pantalla completa + una franja - de degradado abajo para el texto quedaba desconectado del resto - de tarjetas solidas, reportado en produccion. */} + {/* Patron Walmart: foto recortada (object-cover) llenando casi toda + la tarjeta, con solo un margen delgado del pastel como marco -- + no flotando chica con espacio muerto alrededor (object-contain, + intento anterior, reportado como "no aprovecha el espacio"), ni + a pantalla completa sin marco (el intento antes de ese). */} {content.image && ( -
- +
+
)}