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;
 
@@ -112,7 +117,8 @@
   &__menu {
     z-index: 20;
     display: none;
-    position: absolute;
+    position: fixed;
+    position-try-fallbacks: --dropdown-align-right;
     background: var(--bg-default);
     border-radius: var(--border-radius-m);
     list-style: none;
@@ -123,23 +129,29 @@
     border: var(--border-visible);
     animation-duration: 0.2s;
     animation-timing-function: ease;
+    max-height: 20rem;
+    overflow-y: auto;
 
     &--above {
-      bottom: 100%;
-      top: auto;
+      bottom: anchor(top);
       animation-name: dropdown-open-above;
       margin-bottom: 0.5rem;
     }
 
     &--below {
-      top: 100%;
-      bottom: auto;
+      top: anchor(bottom);
       animation-name: dropdown-open-below;
       margin-top: 0.5rem;
     }
 
     &--right {
-      right: 0;
+      right: anchor(right);
+      left: auto;
+    }
+
+    &--left {
+      left: anchor(left);
+      right: 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

@@ -1,14 +1,13 @@
-{{- $id := .id -}}
-{{- $type := .type -}}
 <div class="o-dropdown o-fip-validity__dropdown">
   <button
-    id="{{ $id }}-button"
+    id="{{ .id }}-button"
     class="o-dropdown__button o-fip-validity__dropdown-button"
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-controls="{{ $id }}-dropdown"
+    aria-controls="{{ .id }}-dropdown"
     data-fip-validity-button
     title="{{ T "fipValidity.selectIssuer" }}"
+    style="anchor-name: --{{ .id }}-dropdown"
   >
     <span data-fip-validity-logo></span>
     <span
@@ -22,10 +21,11 @@
     </div>
   </button>
   <menu
-    id="{{ $id }}-dropdown"
-    class="o-dropdown__menu o-dropdown__menu--below"
+    id="{{ .id }}-dropdown"
+    class="o-dropdown__menu o-dropdown__menu--below o-dropdown__menu--left"
     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

@@ -7,6 +7,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">
@@ -15,12 +16,13 @@
   </button>
   <menu
     id="{{ .id }}-dropdown"
-    class="o-dropdown__menu o-dropdown__menu--below {{ if .vertical }}
+    class="o-dropdown__menu o-dropdown__menu--below o-dropdown__menu--left {{ if .vertical }}
       o-dropdown__menu--vertical
     {{ end }}"
     role="listbox"
     aria-hidden="true"
     aria-label="{{ T (printf "%s.dropdown-label" .key) }}"
+    style="position-anchor: --{{ .id }}"
   >
     {{ range .items }}
       {{- $prefix := "" -}}