fix(ui): pin navbar mega panels to viewport

2026-08-24 21:56:27 +05:30
parent 0618782355
commit d2d830e7e2
5 changed files with 26 additions and 3 deletions
@@ -419,6 +419,15 @@ size: string = "default"
      font-weight: 500;
    }

+    .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel {
+      position: fixed;
+      top: calc(var(--wrn-navbar-floating-start, 0px) + 4.25rem);
+      right: 1rem;
+      left: 1rem;
+      width: auto;
+      max-width: none;
+    }
+
    .wrn-navbar__menu-link,
    .wrn-navbar__dropdown > summary,
    .wrn-navbar__action {
@@ -720,6 +729,12 @@ size: string = "default"
        overflow: hidden;
        animation: wrn-navbar-mobile-panel 180ms ease both;
      }
+    .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel {
+        position: static;
+        width: 100%;
+        max-width: 100%;
+        margin-top: 0.25rem;
+      }
    .wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel,
      .wrn-navbar__dropdown[open] > .wrn-navbar__panel {
        transform: none;
@@ -760,6 +775,7 @@ size: string = "default"
      .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
      .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__mega, .wrn-navbar__mega .wrn-mega__trigger) { width: 100%; }
      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__panel { position: static; width: 100%; max-width: none; transform: none; }
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel { position: static; width: 100%; max-width: 100%; margin-top: 0.25rem; }
    }

    @media (max-width: 600px) {