Merge remote-tracking branch 'origin/main' into main

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.

workloads/ecommerce/components/layout/navbar.tsx

@@ -171,7 +171,7 @@ function CategoryNavBar({
 }) {
   return (
     <nav className="bg-ari-marino text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
+      <div className="relative mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
         <Button
           variant="ghost"
           size="icon"
@@ -213,7 +213,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
   }, [open]);
 
   return (
-    <div ref={containerRef} className="relative shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+    <div ref={containerRef} className="shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
       <button
         type="button"
         onClick={() => setOpen((value) => !value)}
@@ -227,7 +227,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
       </button>
 
       {open && (
-        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
+        <div className="absolute left-0 top-full z-50 mt-1 max-h-[80vh] w-[min(92vw,64rem)] overflow-y-auto rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
           <div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
             {tree.map((root) => (
               <div key={root.id}>