diff --git a/projects/aca-content/src/lib/components/search/search-in-menu/search-in-menu.component.scss b/projects/aca-content/src/lib/components/search/search-in-menu/search-in-menu.component.scss index d3ef3e38d..10fa4d36f 100644 --- a/projects/aca-content/src/lib/components/search/search-in-menu/search-in-menu.component.scss +++ b/projects/aca-content/src/lib/components/search/search-in-menu/search-in-menu.component.scss @@ -27,7 +27,7 @@ aca-search-in-menu { padding: 0; border: none; background-color: var(--theme-white-background); - min-width: 512px; + width: min(512px, 100vw); box-shadow: 0 2px 4px var(--theme-grey-divider-color); border-radius: 12px; @@ -67,4 +67,19 @@ aca-search-in-menu { justify-content: space-between; padding: 8px 16px; } + + @media screen and (max-width: 599px) { + position: fixed; + left: 50%; + top: 65px; + transform: translateX(-50%); + width: calc(100vw - 16px); + max-height: calc(100vh - 65px); + overflow-y: auto; + } + + @media screen and (max-width: 320px) { + top: 0; + max-height: 100vh; + } } diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss index f3da16067..8d429fdec 100644 --- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss +++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss @@ -53,14 +53,8 @@ $search-border-radius: 4px; } @media screen and (max-width: 599px) { - $search-width-xsmall: 220px; - .aca-search-input { - max-width: $search-width-xsmall; - } - - .app-search-container { - max-width: $search-width-xsmall; + max-width: 220px; } } diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss index 5f3fcd5ca..29a487ce5 100644 --- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss +++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss @@ -1,6 +1,10 @@ @import '../../../ui/mixins'; aca-search-results { + .aca-content-header { + overflow-x: auto; + } + .aca-search-results-active-search-ai-input { .aca-header-container, .adf-search-results__content-header.aca-content {