fix(ui): keep mega menu open across hover gap

packages/ui/components/MegaMenu.wrn

@@ -44,6 +44,7 @@ component MegaMenu {
   }
 
   state visible = defaultOpen
+  state closeTimer = null
 
   functions {
     shared function columnList() {
@@ -59,15 +60,32 @@ component MegaMenu {
     }
 
     client function showPanel(sourceEvent) {
+      cancelScheduledHide()
       visible = true
       output.open({ sourceEvent: sourceEvent })
     }
 
     client function hidePanel(reason) {
+      cancelScheduledHide()
       visible = false
       output.close({ reason: reason })
     }
 
+    client function cancelScheduledHide() {
+      if (closeTimer) {
+        window.clearTimeout(closeTimer)
+        closeTimer = null
+      }
+    }
+
+    client function scheduleHide() {
+      cancelScheduledHide()
+      closeTimer = window.setTimeout(function () {
+        closeTimer = null
+        hidePanel("pointer-leave")
+      }, 220)
+    }
+
     client function togglePanel(sourceEvent) {
       if (visible) {
         hidePanel("toggle")
@@ -121,7 +139,8 @@ component MegaMenu {
       data-full-width='{fullWidth ? "true" : "false"}'
       data-column-count='{columnCount}'
       @keydown='handleKeydown(event)'
-      @mouseleave='hidePanel("pointer-leave")'
+      @mouseenter='cancelScheduledHide()'
+      @mouseleave='scheduleHide()'
     >
       <button
         type="button"
@@ -141,6 +160,7 @@ component MegaMenu {
         data-wrn-anchored="true"
         data-show="visible"
         data-wrn-roving="both"
+        @mouseenter='cancelScheduledHide()'
       >
         <div class="wrn-mega__layout">
           {#if railList().length > 0}
@@ -278,7 +298,7 @@ component MegaMenu {
       left: 0;
       right: 0;
       bottom: 100%;
-      height: 0.6rem;
+      height: 0.85rem;
     }
 
     .wrn-mega__panel {