chore: cleanup

components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -7,7 +7,6 @@ import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./megaMenu.module.css"
@@ -21,21 +20,14 @@ export default function MegaMenu({
   submenu,
   card,
 }: MegaMenuProps) {
-  const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
+  const { toggleMegaMenu } = useDropdownStore()
   const megaMenuRef = useTrapFocus()
-  const isMegaMenuOpen = openMegaMenu === title
-
-  useHandleKeyUp((event: KeyboardEvent) => {
-    if (event.key === "Escape" && isMegaMenuOpen) {
-      toggleMegaMenu(false)
-    }
-  })
 
   function closeMegaMenu() {
     toggleMegaMenu(false)
   }
   return (
-    <nav>
+    <nav className={styles.megaMenu}>
       {isMobile ? (
         <div className={styles.backWrapper}>
           <button

components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -1,6 +1,5 @@
 .megaMenuContent {
   display: grid;
-  /* align-content: start; */
 }
 
 .seeAllLink {
@@ -54,9 +53,21 @@
 }
 
 @media screen and (max-width: 767px) {
-  .megaMenuContent {
-    gap: var(--Spacing-x2);
+  .megaMenu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
   }
+  .megaMenuContent {
+    flex-grow: 1;
+    grid-template-rows: max-content 1fr;
+    gap: var(--Spacing-x2);
+    align-items: start;
+  }
+  .megaMenuContent:has(.cardWrapper) {
+    grid-template-rows: max-content 1fr max-content;
+  }
+
   .submenusItem:first-child {
     padding-bottom: var(--Spacing-x2);
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -75,6 +86,7 @@
       "seeAllLink"
       "submenus";
     width: 600px;
+    max-width: calc(100vw - var(--Spacing-x4));
   }
 
   .megaMenuContent:has(.cardWrapper) {