feat: Add automatic dropdown positioning

assets/sass/dropdown.scss

@@ -20,6 +20,11 @@
   }
 }
 
+@position-try --dropdown-align-right {
+  left: auto;
+  right: 1rem;
+}
+
 .o-dropdown {
   position: relative;
 
@@ -123,23 +128,29 @@
     border: var(--border-visible);
     animation-duration: 0.2s;
     animation-timing-function: ease;
+    max-height: 20rem;
+    overflow-y: auto;
 
     &--above {
-      bottom: 100%;
-      top: auto;
+      position: fixed;
+      bottom: anchor(top);
+      left: anchor(left);
       animation-name: dropdown-open-above;
       margin-bottom: 0.5rem;
     }
 
     &--below {
-      top: 100%;
-      bottom: auto;
+      position: fixed;
+      top: anchor(bottom);
+      left: anchor(left);
       animation-name: dropdown-open-below;
       margin-top: 0.5rem;
+      position-try-fallbacks: --dropdown-align-right;
     }
 
     &--right {
-      right: 0;
+      right: anchor(right);
+      left: auto;
     }
   }
 }

assets/sass/navigation.scss

@@ -58,6 +58,8 @@ menu > li > menu {
         margin-bottom: 1rem;
         border-radius: 0;
         border: none;
+        max-height: none;
+        overflow-y: visible;
       }
 
       &__button,
@@ -85,16 +87,13 @@ menu > li > menu {
         padding: 0.4rem;
         justify-items: flex-start;
         z-index: 14;
+        max-height: calc(100dvh - 7.6rem);
 
         display: grid;
         grid-auto-flow: row;
         grid-template-rows: auto;
         grid-template-columns: 1fr 1fr 1fr;
 
-        @media (max-width: #{$breakpoint-lg}) {
-          grid-template-columns: 1fr 1fr;
-        }
-
         &--vertical {
           grid-template-columns: auto;
         }

layouts/partials/fip-validity/issuer-dropdown.html

@@ -9,6 +9,7 @@
     aria-controls="{{ $id }}-dropdown"
     data-fip-validity-button
     title="{{ T "fipValidity.selectIssuer" }}"
+    style="anchor-name: --{{ $id }}-dropdown"
   >
     <span data-fip-validity-logo></span>
     <span
@@ -26,6 +27,7 @@
     class="o-dropdown__menu o-dropdown__menu--below"
     role="listbox"
     aria-hidden="true"
+    style="position-anchor: --{{ $id }}-dropdown"
   >
     {{- range .issuers -}}
       {{- $slug := .File.ContentBaseName -}}

layouts/partials/footer.html

@@ -55,6 +55,7 @@
       aria-controls="language-switcher-dropdown"
       title="{{ T "language-switcher.aria-label" }}"
       aria-label="{{ T "language-switcher.aria-label" }}"
+      style="anchor-name: --language-switcher"
     >
       {{ partial "icon" "translate" }}
       <div>{{ $.Site.Language.Label }}</div>
@@ -68,6 +69,7 @@
       role="listbox"
       aria-hidden="true"
       aria-label="{{ T "language-switcher.dropdown-label" }}"
+      style="position-anchor: --language-switcher"
     >
       {{ range .AllTranslations }}
         <li

layouts/partials/nav-dropdown.html

@@ -14,6 +14,7 @@
     aria-controls="{{ $id }}-dropdown"
     title="{{ T (printf "%s.title" $key) }}"
     aria-label="{{ T (printf "%s.aria-label" $key) }}"
+    style="anchor-name: --{{ $id }}"
   >
     <span>{{ T (printf "%s.label" $key) }}</span>
     <div class="o-dropdown__icon">
@@ -28,6 +29,7 @@
     role="listbox"
     aria-hidden="true"
     aria-label="{{ T (printf "%s.dropdown-label" $key) }}"
+    style="position-anchor: --{{ $id }}"
   >
     {{ range $items }}
       {{- $prefix := "" -}}