diff --git a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap index a8ba039219..fca56ddcf8 100644 --- a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap +++ b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap @@ -143,6 +143,7 @@ exports[`Site Header EC renders correctly 1`] = `
-
+
{# EU languages #} {% if _language_selector.overlay.items is not empty and _language_selector.overlay.items is iterable %}
diff --git a/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss b/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss index 1d675ad798..803508258b 100644 --- a/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss +++ b/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss @@ -11,6 +11,12 @@ $language-list: null !default; position: static; } +@mixin with-scrollbar { + overflow-y: auto; + scrollbar-color: var(--c-n) rgba(0, 0, 0, 0); + scrollbar-width: thin; +} + @mixin arrow-up { background-color: map.get($theme, 'color', 'white'); border: map.get($language-switcher, 'arrow-border'); @@ -82,6 +88,8 @@ $language-list: null !default; .ecl-site-header__language-content { display: flex; flex-direction: column; + + @include with-scrollbar; } .ecl-site-header__language-category-title { diff --git a/src/implementations/vanilla/components/site-header/site-header.js b/src/implementations/vanilla/components/site-header/site-header.js index 7f49ec00c9..23ef70665f 100644 --- a/src/implementations/vanilla/components/site-header/site-header.js +++ b/src/implementations/vanilla/components/site-header/site-header.js @@ -41,6 +41,7 @@ export class SiteHeader { languageListOverlaySelector = '[data-ecl-language-list-overlay]', languageListEuSelector = '[data-ecl-language-list-eu]', languageListNonEuSelector = '[data-ecl-language-list-non-eu]', + languageListContentSelector = '[data-ecl-language-list-content]', closeOverlaySelector = '[data-ecl-language-list-close]', searchToggleSelector = '[data-ecl-search-toggle]', searchFormSelector = '[data-ecl-search-form]', @@ -66,6 +67,7 @@ export class SiteHeader { this.languageListOverlaySelector = languageListOverlaySelector; this.languageListEuSelector = languageListEuSelector; this.languageListNonEuSelector = languageListNonEuSelector; + this.languageListContentSelector = languageListContentSelector; this.closeOverlaySelector = closeOverlaySelector; this.searchToggleSelector = searchToggleSelector; this.searchFormSelector = searchFormSelector; @@ -81,6 +83,7 @@ export class SiteHeader { this.languageListOverlay = null; this.languageListEu = null; this.languageListNonEu = null; + this.languageListContent = null; this.close = null; this.focusTrap = null; this.searchToggle = null; @@ -101,6 +104,7 @@ export class SiteHeader { this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this); this.handleClickGlobal = this.handleClickGlobal.bind(this); this.handleResize = this.handleResize.bind(this); + this.setLanguageListHeight = this.setLanguageListHeight.bind(this); } /** @@ -131,6 +135,7 @@ export class SiteHeader { this.languageListOverlay = queryOne(this.languageListOverlaySelector); this.languageListEu = queryOne(this.languageListEuSelector); this.languageListNonEu = queryOne(this.languageListNonEuSelector); + this.languageListContent = queryOne(this.languageListContentSelector); this.close = queryOne(this.closeOverlaySelector); // Create focus trap @@ -373,6 +378,22 @@ export class SiteHeader { } } + /** + * Set a max height for the language list content + */ + setLanguageListHeight() { + const viewportHeight = window.innerHeight; + + if (this.languageListContent) { + const listTop = this.languageListContent.getBoundingClientRect().top; + + const availableSpace = viewportHeight - listTop; + if (availableSpace > 0) { + this.languageListContent.style.maxHeight = `${availableSpace}px`; + } + } + } + /** * Shows the modal language list overlay. */ @@ -381,6 +402,7 @@ export class SiteHeader { this.languageListOverlay.hidden = false; this.languageListOverlay.setAttribute('aria-modal', 'true'); this.languageLink.setAttribute('aria-expanded', 'true'); + this.setLanguageListHeight(); } /**