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" >