feat(F-061): completed feature

work/artifacts/F-061/implementer.md

@@ -0,0 +1,90 @@
+# F-061 — Implementer evidence
+
+## Scope delivered
+
+On the product detail page (`/products/[slug]`) the image container had
+`aspect-[5/7] max-h-[500px]`. That bounded the container to roughly 357×500
+even when the grid cell was ~616 px wide on desktop (lg+ 2-col layout), so
+the container was left-aligned inside its cell with empty space on the
+right. The same problem appeared at tablet widths where the single
+column cell is much wider than 357 px. The user pointed at `/checkout`
+as the reference behaviour: the checkout layout lets each cell's
+content fill the cell width and centres the visual content inside via
+`flex items-center justify-center` / `object-contain`.
+
+## Change
+
+`project/frontend/src/app/products/[slug]/page.tsx`
+
+The image container no longer enforces `aspect-[5/7]`. It now uses the
+same pattern as `/checkout`: the container fills the column and the
+image is centred inside via `object-contain`:
+
+```tsx
+<div className="relative w-full max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
+  {product.images?.[0] ? (
+    <Image
+      src={product.images[0].url}
+      alt={product.name}
+      fill
+      className="object-contain"
+      priority
+      sizes="(max-width: 1024px) 100vw, 50vw"
+    />
+  ) : (
+    <span className="absolute inset-0 flex items-center justify-center text-8xl">🌿</span>
+  )}
+</div>
+```
+
+Why this is the right pattern:
+
+- `w-full` makes the container fill the grid cell on every breakpoint
+  (desktop, tablet, mobile). The image is therefore always horizontally
+  centred within its block.
+- `max-h-[500px]` still bounds the height so very tall images don't
+  push the rest of the page down.
+- The `<Image fill>` + `object-contain` keeps the source aspect ratio
+  intact; non-square images are letterboxed inside the wide container
+  with the empty space shared equally on both sides — which is the
+  expected behaviour for product imagery.
+- The 🌿 fallback uses `absolute inset-0 flex items-center justify-center`
+  so it stays centred even without an `<Image>`.
+
+## Acceptance traceability
+
+| Acceptance criterion | How it is met |
+| -------------------- | ------------- |
+| Image container centred horizontally inside its grid cell on desktop (2 cols) and mobile (1 col) | `w-full` makes the container span the full cell width; `object-contain` centres the visual image inside the container. |
+| No empty space on the right of the image on desktop with 2-col layout | The container now fills the column, so the image is centred, not pinned to the left edge. |
+| Image stays inside its bounding box on tablet widths (`max-w` cap) | `max-h-[500px]` caps the height. `w-full` lets the container span the cell, but the container never exceeds `max-h-[500px]` so the page layout is preserved. |
+| Description cell unchanged | The `<div>` containing brand, price, stock, button, description, categories, SKU was not touched. |
+| `verify.sh` is green | Exit 0. |
+
+## Manual verification
+
+```
+$ curl http://192.168.18.93:3003/products/proteina-guisante-ecologica | grep -oE 'relative w-full max-h-\[500px\][^"]*'
+relative w-full max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden
+
+$ curl http://192.168.18.93:3003/products/proteina-guisante-ecologica | grep -oE 'aspect-\[5/7\]'
+(no match in the image container)
+```
+
+The container fills the column; the image is rendered with
+`object-contain`, so a square source (800×800) displays at the cell's
+natural aspect (e.g. 600×500 on desktop, 358×500 on mobile) with the
+image centred.
+
+## Build verification
+
+- `npx tsc --noEmit` (frontend) — exit 0
+- `./scripts/verify.sh` — exit 0
+- Frontend service restarted via `monolith.sh prod restart frontend`
+  → HTTP 200 on `/products/[slug]`
+
+## Files touched
+
+```
+project/frontend/src/app/products/[slug]/page.tsx (modified)
+```