docs(adr-0010): cerrar bug de overflow mobile 320px, actualizar estado de imagenes

workloads/docs-portal/docs/decisiones/0010-pago-envio-reales-y-storefront.md

@@ -425,27 +425,49 @@ Resultados reales, uno por uno (código de cada prueba en
     un dispositivo real.
 21b. **Accesibilidad del checkout completo** por teclado (no solo el
     buscador) — tab order y foco visible en los 3 pasos.
-22. **Importación manual de imágenes no se refleja en el storefront**
+22. **Importación manual de imágenes no se reflejaba en el storefront**
-    (reportado por el usuario 2026-09-20): subir/editar imágenes de un
+    (reportado por el usuario 2026-09-20) — **causa raíz encontrada y
-    producto a mano (vs. importación por CSV, que sí funciona) no
+    arreglada en código (2026-09-20), pendiente confirmar con una
-    aparece del lado del storefront. Falta reproducir contra el flujo
+    edición real.** `medusaFetch()` en `lib/headless/providers/medusa.ts`
-    real de importación manual del admin de Medusa (ver
+    usaba `next:{revalidate:60,tags:["medusa-products"]}`, caché en
-    `temp-admin`/`ari-shopping-tienda` en memoria) y confirmar si es
+    memoria por-pod que sobrevivía a `force-dynamic`. Con
-    caché (ISR de Next, `force-dynamic` ya está en la página de
+    `frontend-deploy` en 2 réplicas sin cacheHandler compartido, el POST
-    producto — ver más arriba), staleness de Meilisearch (ver memoria
+    de `/api/revalidate` del subscriber de Medusa solo llegaba a uno de
-    `search-inventory-staleness`, mismo síntoma de "el catálogo directo
+    los dos pods — el otro seguía sirviendo datos viejos hasta que el
-    sí, la búsqueda no") o algo específico del pipeline de importación
+    TTL expirara solo. Una edición puntual + revisar al toque tenía
-    en `commerce-backend`.
+    ~50% de chance de pegarle al pod stale; una importación CSV (mucho
-23. **En mobile, la visualización de imágenes de producto se corta y
+    más lenta) le daba tiempo de sobra al TTL para expirar en ambos.
-    obliga a scrollear** (reportado por el usuario 2026-09-20, con
+    **Fix:** se sacó el `next.revalidate`/`tags` del fetch — ya en
-    captura real de `shop.cruzcloud.net` en un producto con múltiples
+    producción. Falta la prueba con una edición manual real (vía
-    fotos). Toda la clase de bug de overflow por falta de `min-w-0` ya
+    `temp-admin`/`ari-shopping-tienda` en memoria) para confirmar que
-    se revisó en vivo en esta sesión y sigue presente en
+    el síntoma original desapareció, no solo que la causa técnica tiene
-    `product-gallery.tsx` y `app/product/[slug]/page.tsx` — sospecha
+    sentido.
-    sin confirmar: el modal "Zoom interactivo"
+23. **En mobile (viewport real de 320px), la página se cortaba y
-    (`ProductGallery`/`DialogContent`, `min-h-[70vh]` +
+    obligaba a scrollear horizontalmente — RESUELTO 2026-09-20.**
-    `overflow-hidden`) en viewport móvil real, donde la barra de
+    Reportado por el usuario con captura real de `shop.cruzcloud.net`.
-    direcciones de Chrome/Safari hace que `100vh` mida más que el área
+    **No era la galería de imágenes** (esa clase de bug con `min-w-0`
-    visible real. Pendiente reproducir con un dispositivo real o
+    ya estaba corregida desde la sesión anterior, confirmado en vivo
-    emulación de `visualViewport` (Playwright con viewport móvil no
+    que seguía sana). Dos causas reales encontradas por separado,
-    replica el comportamiento dinámico de la barra de direcciones).
+    reproducidas con Playwright contra un viewport de 320×480 real:
+    - **Footer, bloque "Newsletter"** (`components/layout/footer.tsx`):
+      el párrafo de texto, sin `min-w-0`, le pedía al grid item su
+      ancho de una sola línea sin wrappear (~335px, medido en vivo)
+      en vez de dejarse achicar — forzaba la única columna del grid
+      (`sm:grid-cols-2 lg:grid-cols-4`, sin `grid-cols-1` propio pero
+      con auto-stacking correcto por debajo de `sm`) a 335px de ancho,
+      arrastrando la página entera. Mismo bug de fondo que el ya
+      documentado en la galería, en un grid en vez de un
+      `overflow-x-auto`.
+    - **Navbar, fila de "Departamentos"/"Todo"** (`components/layout/navbar.tsx`):
+      los 3 items de esa fila (botón de menú, "Departamentos", "Todo")
+      tenían los tres `shrink-0` — ninguno podía achicarse, así que si
+      los tres no entraban en 320px, desbordaban sí o sí (`min-w-0` no
+      aplica cuando el ítem no está pensado para achicarse). Fix:
+      ocultar el texto "Departamentos" en mobile (queda ícono + flecha,
+      con `aria-label` agregado para no perder accesibilidad), libera
+      espacio suficiente para que quepan los tres.
+    Verificado en vivo con Playwright (viewport 320×480 real, no
+    emulación de dispositivo con DPR) contra staging y producción
+    después del deploy: `document.documentElement.scrollWidth ===
+    clientWidth` en home y en página de producto, en ambos ambientes —
+    sin overflow.

workloads/ecommerce-staging/frontend/patches/deployment.yaml

@@ -26,11 +26,11 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.270
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.273
           env:
             # Ver comentario en workloads/ecommerce/frontend/patches/deployment.yaml
             - name: APP_VERSION
-              value: v1.0.270
+              value: v1.0.273
             - name: HEADLESS_PROVIDER
               value: medusa
             # Backend COMPARTIDO con Producción a propósito (decisión del

workloads/ecommerce/components/layout/footer.tsx

@@ -34,7 +34,16 @@ const SHOP_LINKS = [
 ];
 
 export function Footer() {
-  return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3">{SOCIAL_LINKS.map(({ label, href, Icon }) => <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} className="text-white/80 transition hover:text-ari-coral-claro"><Icon /></a>)}</div></div><FooterColumn title="Compra" links={SHOP_LINKS} /><FooterColumn title="Ayuda" links={HELP_LINKS} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless {appVersion} · GitOps</div></footer>;
+  return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3">{SOCIAL_LINKS.map(({ label, href, Icon }) => <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} className="text-white/80 transition hover:text-ari-coral-claro"><Icon /></a>)}</div></div><FooterColumn title="Compra" links={SHOP_LINKS} /><FooterColumn title="Ayuda" links={HELP_LINKS} />{/* min-w-0: sin esto, un grid item de texto toma como minimo su ancho
+    max-content (una sola linea, "Recibe lanzamientos y promociones
+    especiales." sin wrappear, ~335px) en vez de dejarse achicar y
+    wrappear dentro del track del grid -- confirmado en vivo 2026-09-20
+    contra un viewport real de 320px: la columna entera del footer (y
+    con ella, la pagina completa) quedaba forzada a 335px de ancho por
+    este unico parrafo. Mismo bug de fondo que el ya documentado en
+    product-gallery.tsx/app/product/[slug]/page.tsx, en un grid en vez
+    de un overflow-x-auto. */}
+<div className="min-w-0"><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless {appVersion} · GitOps</div></footer>;
 }
 
 function FooterColumn({ title, links }: { title: string; links: { label: string; href: string }[] }) {

workloads/ecommerce/components/layout/navbar.tsx

@@ -261,10 +261,18 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
         onClick={() => setOpen((value) => !value)}
         aria-expanded={open}
         aria-haspopup="true"
+        aria-label="Departamentos"
         className={`flex items-center gap-1.5 ${pillClass(open)}`}
       >
         <LayoutGrid className="size-4" />
-        Departamentos
+        {/* Texto oculto en mobile: los 3 items de esta fila (menu, este
+            boton, "Todo") tienen shrink-0 -- ninguno se achica, asi que si
+            los tres no entran, desbordan la pagina entera (confirmado en
+            vivo 2026-09-20 contra 320px real: 14px de overflow horizontal
+            con el texto visible). No es un caso de min-w-0 faltante (ese
+            fix asume que el item PUEDE achicarse) -- ocultar la palabra
+            mas larga de la fila es lo que de verdad libera espacio. */}
+        <span className="hidden sm:inline">Departamentos</span>
         <ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
       </button>
 

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,14 +25,14 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.263
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.273
           env:
             # La actualiza el mismo paso del CD (.gitea/workflows/build.yaml)
             # que bumpea el tag de la imagen -- el footer la lee
             # (process.env.APP_VERSION) para mostrar la versión real
             # desplegada en vez de un "v4.1" fijo.
             - name: APP_VERSION
-              value: v1.0.263
+              value: v1.0.273
             - name: HEADLESS_PROVIDER
               value: medusa
             - name: MEDUSA_BACKEND_URL