Fix mega menu layout: keep panel in header container and show childless categories in one row.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/products-mega-menu.tsx

@@ -11,6 +11,8 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
   const tree = buildCategoryTree(categories).filter(
     (node) => node.children.length > 0 || !node.parentId,
   );
+  const withChildren = tree.filter((node) => node.children.length > 0);
+  const leafParents = tree.filter((node) => node.children.length === 0);
 
   return (
     <div
@@ -47,8 +49,9 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
           {tree.length === 0 ? (
             <p className="empty-note">دسته‌بندی‌ای برای نمایش وجود ندارد.</p>
           ) : (
+            <>
               <div className="mega-menu-grid">
-              {tree.map((parent) => (
+                {withChildren.map((parent) => (
                   <div key={parent.id} className="mega-menu-column">
                     <Link
                       href={storeCategoryHref(parent.id, categoryLabel(parent))}
@@ -57,7 +60,6 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
                     >
                       {categoryLabel(parent)}
                     </Link>
-                  {parent.children.length > 0 ? (
                     <ul className="mega-menu-children">
                       {parent.children.map((child) => (
                         <li key={child.id}>
@@ -71,10 +73,28 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
                         </li>
                       ))}
                     </ul>
-                  ) : null}
                   </div>
                 ))}
               </div>
+              {leafParents.length > 0 ? (
+                <div className="mega-menu-leaf-row">
+                  <p className="mega-menu-leaf-label">More</p>
+                  <ul className="mega-menu-leaf-list">
+                    {leafParents.map((parent) => (
+                      <li key={parent.id}>
+                        <Link
+                          href={storeCategoryHref(parent.id, categoryLabel(parent))}
+                          className="mega-menu-parent-leaf"
+                          onClick={() => setOpen(false)}
+                        >
+                          {categoryLabel(parent)}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ) : null}
+            </>
           )}
         </div>
       ) : null}

app/globals.css

@@ -71,6 +71,7 @@ textarea {
 }
 
 .header-inner {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1802,7 +1803,7 @@ a.article-card:hover .article-media img {
 }
 
 .mega-menu {
-  position: relative;
+  position: static;
 }
 
 .mega-menu-trigger {
@@ -1825,22 +1826,34 @@ a.article-card:hover .article-media img {
   position: absolute;
   top: calc(100% + 14px);
   right: 0;
-  width: min(760px, 70vw);
-  padding: 18px;
+  left: 0;
+  width: auto;
+  max-width: none;
+  padding: 20px 22px;
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.97);
   box-shadow: var(--shadow);
   z-index: 35;
 }
 
+.mega-menu-panel::before {
+  content: "";
+  position: absolute;
+  top: -18px;
+  right: 0;
+  left: 0;
+  height: 18px;
+}
+
 .mega-menu-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px 22px;
 }
 
 .mega-menu-column {
   padding: 4px 2px 8px;
+  min-width: 0;
 }
 
 .mega-menu-parent {
@@ -1879,6 +1892,52 @@ a.article-card:hover .article-media img {
   color: var(--secondary);
 }
 
+.mega-menu-leaf-row {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(0, 35, 75, 0.08);
+}
+
+.mega-menu-leaf-label {
+  margin: 0 0 12px;
+  color: var(--secondary);
+  font-family: var(--font-en-title);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.mega-menu-leaf-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mega-menu-parent-leaf {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border: 1px solid rgba(0, 35, 75, 0.1);
+  border-radius: 999px;
+  color: var(--primary);
+  background: rgba(248, 243, 236, 0.7);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+  text-decoration: none;
+  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
+}
+
+.mega-menu-parent-leaf:hover {
+  border-color: rgba(204, 153, 102, 0.5);
+  color: var(--secondary);
+  background: rgba(255, 255, 255, 0.95);
+}
+
 .cart-drawer-root {
   position: fixed;
   inset: 0;
@@ -2250,7 +2309,9 @@ a.article-card:hover .article-media img {
   }
 
   .mega-menu-panel {
-    width: min(92vw, 520px);
+    width: auto;
+    left: 0;
+    right: 0;
   }
 }