From a517e9f9c8d00c25311245cb89a018d0b3137a49 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Fri, 23 Aug 2024 14:42:52 +0200
Subject: [PATCH] OZG-6301 OZG-6525 Add scrollbar to search results

---
 .../instant-search/instant-search.component.ts      |  2 +-
 .../search-result-layer.component.ts                | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts
index b4e2dd528d..0583b7b70b 100644
--- a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts
+++ b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts
@@ -48,7 +48,7 @@ import { InstantSearchQuery, InstantSearchResult } from './instant-search.model'
     <ods-aria-live-region [text]="ariaLiveText" />
     <ods-search-result-layer
       *ngIf="results.length && areResultsVisible"
-      class="absolute z-50 mt-3 w-full"
+      containerClass="absolute z-50 mt-3 max-h-[calc(50vh)] w-full overflow-y-auto"
       id="results"
     >
       <ods-search-result-header
diff --git a/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts
index 971e06b585..f06c873fc8 100644
--- a/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts
+++ b/alfa-client/libs/design-system/src/lib/instant-search/search-result-layer/search-result-layer.component.ts
@@ -1,15 +1,22 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'ods-search-result-layer',
   standalone: true,
   imports: [CommonModule],
-  template: `<div class="rounded-lg border border-primary-600/50 bg-background-50 shadow-lg">
+  template: `<div
+    [ngClass]="[
+      'rounded-lg border border-primary-600/50 bg-background-50 shadow-lg',
+      containerClass,
+    ]"
+  >
     <ng-content select="[header]" />
     <ul role="list">
       <ng-content />
     </ul>
   </div>`,
 })
-export class SearchResultLayerComponent {}
+export class SearchResultLayerComponent {
+  @Input() containerClass: string = '';
+}
-- 
GitLab