From 3b496d0606b9f296ff9bb10618a34e9bd5ea06e7 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Sat, 20 Jun 2026 15:15:03 +0200
Subject: [PATCH 1/2] feat: Add automatic dropdown positioning

---
 assets/sass/dropdown.scss                     | 21 ++++++++++++++-----
 assets/sass/navigation.scss                   |  2 ++
 .../fip-validity/issuer-dropdown.html         |  2 ++
 layouts/partials/footer.html                  |  2 ++
 layouts/partials/nav-dropdown.html            |  2 ++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss
index bddf5c2c5..4f6a2ada7 100644
--- a/assets/sass/dropdown.scss
+++ b/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: 80dvh;
+    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;
     }
   }
 }
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
index 3ce1b7ca6..3dff096bb 100644
--- a/assets/sass/navigation.scss
+++ b/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,
diff --git a/layouts/partials/fip-validity/issuer-dropdown.html b/layouts/partials/fip-validity/issuer-dropdown.html
index 39bfe6bdb..57b5799ee 100644
--- a/layouts/partials/fip-validity/issuer-dropdown.html
+++ b/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 -}}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 2ea5ab766..8a4dbc0a5 100644
--- a/layouts/partials/footer.html
+++ b/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
diff --git a/layouts/partials/nav-dropdown.html b/layouts/partials/nav-dropdown.html
index ab689579d..50d1370c4 100644
--- a/layouts/partials/nav-dropdown.html
+++ b/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 := "" -}}

From 989ee48c6d43672f527f2187cc3bf48da5112d8a Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Sat, 20 Jun 2026 15:40:29 +0200
Subject: [PATCH 2/2] feat: Add max-height to dropdown

---
 assets/sass/dropdown.scss   | 2 +-
 assets/sass/navigation.scss | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss
index 4f6a2ada7..21666ce1b 100644
--- a/assets/sass/dropdown.scss
+++ b/assets/sass/dropdown.scss
@@ -128,7 +128,7 @@
     border: var(--border-visible);
     animation-duration: 0.2s;
     animation-timing-function: ease;
-    max-height: 80dvh;
+    max-height: 20rem;
     overflow-y: auto;
 
     &--above {
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
index 3dff096bb..eee7f61ab 100644
--- a/assets/sass/navigation.scss
+++ b/assets/sass/navigation.scss
@@ -87,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;
         }