[ACS-10258] a11y fix: Search page is unreadable at 320px width (#5123)

* [ACS-10258] a11y fix: Search page is unreadable at 320px width

* [ACS-10258] cr fix

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;
+  }
 }

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;
+    max-width: 220px;
-  }
-
-  .app-search-container {
-    max-width: $search-width-xsmall;
   }
 }
 

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 {