From 8889fd9ea2ee55ecf2eb914b9c71e6a5e3a9614b Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Mon, 14 Sep 2026 01:29:01 +0000
Subject: [PATCH] =?UTF-8?q?fix(ecommerce):=20miniaturas=20recortaban=20fot?=
 =?UTF-8?q?os=20verticales=20+=20tama=C3=B1o=20de=20fuente=20de=20descripc?=
 =?UTF-8?q?i=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Miniaturas pasan de object-cover a object-contain: fotos con
  relación de aspecto muy vertical (confirmado en vivo: 933x1500 en
  este catálogo) perdían cabeza o pies al forzar el recorte cuadrado.
  Reportado por el usuario viendo las miniaturas de un producto real.
- La descripción del producto bajaba de 18px (text-lg, mismo tamaño
  que un párrafo de apertura de página completa como /envios) a 16px
  (text-base) -- se veía desproporcionada al lado del resto de la
  columna de compra en el layout de 3 columnas.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
---
 workloads/ecommerce/app/product/[slug]/page.tsx           | 2 +-
 .../ecommerce/components/product/product-gallery.tsx      | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/workloads/ecommerce/app/product/[slug]/page.tsx b/workloads/ecommerce/app/product/[slug]/page.tsx
index 2b9b944..1214b4d 100644
--- a/workloads/ecommerce/app/product/[slug]/page.tsx
+++ b/workloads/ecommerce/app/product/[slug]/page.tsx
@@ -55,7 +55,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
         <div className="min-w-0">
           <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">{product.category} · {product.collection}</span>
           <h1 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">{product.name}</h1>
-          <p className="mt-5 text-lg leading-8 text-slate-600">{product.description}</p>
+          <p className="mt-5 text-base leading-7 text-slate-600">{product.description}</p>
           {/* Antes escondido detrás de un click en el acordeón --
               siempre visible, estilo Amazon, con los mismos datos
               reales que ya existían (marca/edad/categoría/colección),
diff --git a/workloads/ecommerce/components/product/product-gallery.tsx b/workloads/ecommerce/components/product/product-gallery.tsx
index 665e68a..97883bc 100644
--- a/workloads/ecommerce/components/product/product-gallery.tsx
+++ b/workloads/ecommerce/components/product/product-gallery.tsx
@@ -118,7 +118,13 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
           miniaturas sin wrappear puede forzar overflow horizontal en toda
           la pagina en mobile. */}
       <div className="order-2 flex gap-3 overflow-x-auto lg:order-1 lg:flex-col">
-        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
+        {/* object-contain (no object-cover): fotos de producto con relacion
+            de aspecto muy vertical (ej. 933x1500, confirmado en vivo para
+            este catalogo) perdian la cabeza o los pies recortados al forzar
+            el cuadrado con cover -- reportado por el usuario viendo las
+            miniaturas. contain deja la miniatura completa siempre, con
+            "letterbox" del mismo bg-slate-50 que usa la imagen principal. */}
+        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 bg-slate-50 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-contain" /></button>)}
       </div>
       <div className="relative order-1 lg:order-2">
         <Dialog open={open} onOpenChange={changeOpen}>