[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

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>

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

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' });

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 }) {