From 6d8729d96f51be8acbf1af9ac70f57dd9681146b Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:43:57 +0100
Subject: [PATCH] [ACS-10258] a11y fix: Search page: Table columns are lost on
 320px width (#5021)

* [ACS-10258] a11y fix: Search page: Table columns are lost on 320px width

* [ACS-10258] cr fix
---
 .../search-results.component.html             |  5 +++-
 .../search-results.component.scss             | 20 +++++++++++++++-
 .../search-results.component.spec.ts          | 24 +++++++++++++++++++
 .../search-results.component.ts               |  7 ++++++
 4 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
index 55cb4bc67..db351cf86 100644
--- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
+++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
@@ -19,7 +19,10 @@
               <p>{{ 'APP.BROWSE.SEARCH.FILTER_SET' | translate }}</p>
               <adf-search-form />
             </div>
-            <mat-divider [vertical]="true" class="aca-content__divider" aria-hidden="true" />
+            <mat-divider
+              [vertical]="!isSmallScreen"
+              [ngClass]="'aca-content__divider-' + (isSmallScreen ? 'horizontal' : 'vertical')"
+              aria-hidden="true" />
             <div class="aca-content__advanced-filters">
               <div class="aca-content__advanced-filters--header">
                 <p>{{ 'APP.BROWSE.SEARCH.ADVANCED_FILTERS' | translate }}</p>
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 bca1510e1..46f802b39 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
@@ -144,10 +144,14 @@ aca-search-results {
         }
       }
 
-      &__divider {
+      &__divider-vertical {
         height: 100%;
       }
 
+      &__divider-horizontal {
+        width: 100%;
+      }
+
       &__advanced-filters {
         width: 100%;
         padding: 0 12px;
@@ -188,4 +192,18 @@ aca-search-results {
       }
     }
   }
+
+  @media (max-width: 320px) {
+    .adf-search-results__content-header {
+      flex-direction: column;
+    }
+
+    .adf-search-results__content {
+      overflow-y: auto;
+    }
+
+    .adf-document-list {
+      min-height: unset;
+    }
+  }
 }
diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.spec.ts b/projects/aca-content/src/lib/components/search/search-results/search-results.component.spec.ts
index b9445886b..9e8a4c58b 100644
--- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.spec.ts
+++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.spec.ts
@@ -43,6 +43,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatMenuHarness } from '@angular/material/menu/testing';
 import { SavedSearchesContextService } from '../../../services/saved-searches-context.service';
 import { IsFeatureSupportedInCurrentAcsPipe } from '../../../pipes/is-feature-supported.pipe';
+import { MatDividerHarness } from '@angular/material/divider/testing';
 
 describe('SearchComponent', () => {
   let component: SearchResultsComponent;
@@ -65,6 +66,7 @@ describe('SearchComponent', () => {
   const editSavedSearchesSpy = jasmine.createSpy('editSavedSearch');
   const getSavedSearchButton = (): HTMLButtonElement => fixture.nativeElement.querySelector('.aca-content__save-search-action');
   const getResetSearchButton = (): HTMLButtonElement => fixture.nativeElement.querySelector('.aca-content__reset-action');
+  const getDividerHarness = () => loader.getHarness(MatDividerHarness);
 
   const encodeQuery = (query: any): string => {
     return Buffer.from(JSON.stringify(query)).toString('base64');
@@ -400,6 +402,28 @@ describe('SearchComponent', () => {
     flush();
   }));
 
+  it('should set isSmallScreen to true for small width', async () => {
+    spyOnProperty(window, 'innerWidth').and.returnValue(300);
+    window.dispatchEvent(new Event('resize'));
+    fixture.detectChanges();
+    const divider = await getDividerHarness();
+
+    expect(component.isSmallScreen).toBeTrue();
+    expect(await (await divider.host()).getAttribute('class')).toContain('aca-content__divider-horizontal');
+    expect(await divider.getOrientation()).toBe('horizontal');
+  });
+
+  it('should set isSmallScreen to false for large width', async () => {
+    spyOnProperty(window, 'innerWidth').and.returnValue(800);
+    window.dispatchEvent(new Event('resize'));
+    fixture.detectChanges();
+    const divider = await getDividerHarness();
+
+    expect(component.isSmallScreen).toBeFalse();
+    expect(await (await divider.host()).getAttribute('class')).toContain('aca-content__divider-vertical');
+    expect(await divider.getOrientation()).toBe('vertical');
+  });
+
   describe('reset button', () => {
     it('should enable the reset button when there are queryFragments', fakeAsync(() => {
       queryBuilder.queryFragmentsUpdate.next({ test: 'test-value' });
diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.ts b/projects/aca-content/src/lib/components/search/search-results/search-results.component.ts
index 7dffbb171..75238f076 100644
--- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.ts
+++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.ts
@@ -149,8 +149,12 @@ export class SearchResultsComponent extends PageComponent implements OnInit, OnD
   columns: DocumentListPresetRef[] = [];
   encodedQuery: string;
   searchConfig: SearchConfiguration;
+  isSmallScreen = window.innerWidth < 320;
 
   private previousEncodedQuery: string;
+  private readonly resizeListener = () => {
+    this.isSmallScreen = window.innerWidth < 320;
+  };
 
   constructor(
     tagsService: TagService,
@@ -260,10 +264,13 @@ export class SearchResultsComponent extends PageComponent implements OnInit, OnD
           }
         });
     }
+
+    window.addEventListener('resize', this.resizeListener);
   }
 
   ngOnDestroy(): void {
     this.savedSearchesService.currentContextSavedSearch = undefined;
+    window.removeEventListener('resize', this.resizeListener);
   }
 
   onSearchError(error: { message: any }) {