diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss
index bddf5c2c5..21666ce1b 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: 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;
}
}
}
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
index 3ce1b7ca6..eee7f61ab 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,
@@ -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;
}
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"
>