DepartmentsMegaMenu posicionaba el panel con absolute left-0 relativo al wrapper que envuelve solo el boton (relative shrink-0), el cual no arranca en x=0 del viewport (hay hamburger+gap+px-4 antes). Con width: min(92vw,64rem) eso desbordaba por la derecha en pantallas angostas (confirmado: 43px de overflow en 360px, 39px en 412px). Se mueve el contexto de posicionamiento (relative) al contenedor completo de la fila del nav, que si ocupa el ancho real del viewport, y se agrega max-h-[80vh] overflow-y-auto para scroll vertical si el arbol de categorias excede la altura de pantalla. Validado con build real (typecheck+lint+build) y Playwright headless en 360px y 412px: panel queda en x=0, sin scroll horizontal de pagina.
ARI Shopping Headless Storefront v4.1
Actualización enfocada en UX, interactividad y rendimiento sobre Next.js 15.5.10.
Correcciones principales
- Encabezado blanco premium con acentos cyan, violeta, fucsia y navegación negra.
- Imágenes promocionales sin
opacity,mix-blendni filtros de color. - Menú principal funcional mediante Drawer accesible de Radix UI.
- Cuenta y favoritos funcionales.
- Carrusel con flechas, teclado, scroll suave y
scroll-snap. - Zoom real de producto entre 100% y 300%, rueda, botones, doble clic y arrastre.
- Thumbnails WebP dedicados para tarjetas, búsqueda, carrito y favoritos.
- Recursos originales recomprimidos y caché HTTP para
/images. next/imageen modounoptimizedporque los recursos ya vienen procesados; evita latencia del optimizador durante la primera visita.- Menos componentes animados con JavaScript; las tarjetas usan transiciones CSS.
content-visibilitypara contenido fuera de pantalla.- Pantalla
loading.tsxpara transiciones de ruta.
Validación
npm ci
npm run typecheck
npm run build
Flujo
Gitea → Gitea Actions → Registry → actualización de frontend.yaml → Argo CD → Kubernetes.