From 65860b81b12246fde47130e2a90e6f2950ebf2f7 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 28 Nov 2023 19:17:23 +0100
Subject: [PATCH] 108595: fix for overflowing search filter badge selection

---
 .../search-label/search-label.component.html             | 8 +++++---
 .../search-label/search-label.component.scss             | 3 +++
 .../search-labels/search-label/search-label.component.ts | 1 +
 .../search/search-labels/search-labels.component.html    | 4 ++--
 .../search/search-labels/search-labels.component.scss    | 9 ++++++++-
 src/app/shared/search/search.component.html              | 4 ++--
 6 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 src/app/shared/search/search-labels/search-label/search-label.component.scss

diff --git a/src/app/shared/search/search-labels/search-label/search-label.component.html b/src/app/shared/search/search-labels/search-label/search-label.component.html
index 2269771de1..2a2c6955a8 100644
--- a/src/app/shared/search/search-labels/search-label/search-label.component.html
+++ b/src/app/shared/search/search-labels/search-label/search-label.component.html
@@ -1,7 +1,9 @@
-<a class="badge badge-primary mr-1 mb-1"
+<a class="badge badge-primary mb-1"
    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
-    {{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
-    <span aria-hidden="true"> ×</span>
+    <span class="d-flex">
+      <span class="flex-grow-1 text-left">{{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}</span>
+      <span class="pl-1">×</span>
+    </span>
 </a>
diff --git a/src/app/shared/search/search-labels/search-label/search-label.component.scss b/src/app/shared/search/search-labels/search-label/search-label.component.scss
new file mode 100644
index 0000000000..601f57d407
--- /dev/null
+++ b/src/app/shared/search/search-labels/search-label/search-label.component.scss
@@ -0,0 +1,3 @@
+.badge {
+  white-space: inherit;
+}
diff --git a/src/app/shared/search/search-labels/search-label/search-label.component.ts b/src/app/shared/search/search-labels/search-label/search-label.component.ts
index ab4c57d9f5..bdcdc3efdb 100644
--- a/src/app/shared/search/search-labels/search-label/search-label.component.ts
+++ b/src/app/shared/search/search-labels/search-label/search-label.component.ts
@@ -12,6 +12,7 @@ import { stripOperatorFromFilterValue } from '../../search.utils';
 @Component({
   selector: 'ds-search-label',
   templateUrl: './search-label.component.html',
+  styleUrls: ['./search-label.component.scss']                                                        ,
 })
 
 /**
diff --git a/src/app/shared/search/search-labels/search-labels.component.html b/src/app/shared/search/search-labels/search-labels.component.html
index f6af072c51..4812dd5096 100644
--- a/src/app/shared/search/search-labels/search-labels.component.html
+++ b/src/app/shared/search/search-labels/search-labels.component.html
@@ -1,5 +1,5 @@
 <div class="labels">
-    <ng-container *ngFor="let key of ((appliedFilters | async) | dsObjectKeys)">
-        <ds-search-label *ngFor="let value of (appliedFilters | async)[key]" [inPlaceSearch]="inPlaceSearch" [key]="key" [value]="value" [appliedFilters]="appliedFilters"></ds-search-label>
+    <ng-container *ngFor="let key of ((appliedFilters | async) | dsObjectKeys); let lastType = last">
+        <ds-search-label *ngFor="let value of (appliedFilters | async)[key]; let lastOfType = last" [inPlaceSearch]="inPlaceSearch" [key]="key" [value]="value" [appliedFilters]="appliedFilters"></ds-search-label>
     </ng-container>
 </div>
diff --git a/src/app/shared/search/search-labels/search-labels.component.scss b/src/app/shared/search/search-labels/search-labels.component.scss
index c48cd57304..348c46571d 100644
--- a/src/app/shared/search/search-labels/search-labels.component.scss
+++ b/src/app/shared/search/search-labels/search-labels.component.scss
@@ -1,3 +1,10 @@
 :host {
     line-height: 1;
-}
\ No newline at end of file
+  .labels {
+    margin: 0 calc(-1 * var(--bs-spacer)/8);
+    ds-search-label {
+      display: inline-block;
+      padding: 0 calc(var(--bs-spacer)/8);
+    }
+  }
+}
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
index e7dd02e286..845e1e7af5 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -90,8 +90,8 @@
                     [inPlaceSearch]="inPlaceSearch"
                     [searchPlaceholder]="searchFormPlaceholder | translate">
     </ds-themed-search-form>
-    <div class="row mb-3 mb-md-1">
-        <div class="labels col-sm-9">
+    <div class="mb-3 mb-md-1">
+        <div class="labels">
             <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
         </div>
     </div>