From aefa1b3f7877d254fb8748b151f75a5afa464b0b Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Wed, 1 Apr 2026 09:46:43 +0200
Subject: [PATCH] [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
---
 .../search-in-menu.component.scss               | 17 ++++++++++++++++-
 .../search-input/search-input.component.scss    |  8 +-------
 .../search-results.component.scss               |  4 ++++
 3 files changed, 21 insertions(+), 8 deletions(-)

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 {