Merge fix/adr0008-megamenu-mobile-overflow into main

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}>