From f4dc8ca3d222f774b4424b9dae44577386ca1a28 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Tue, 28 Nov 2023 19:17:23 +0100
Subject: [PATCH 1/2] 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 bffb7f9329b..5b7b4a9c359 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,6 +1,8 @@
-<a class="badge badge-primary mr-1 mb-1 text-capitalize"
+<a class="badge badge-primary mb-1 text-capitalize"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
-    {{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
-    <span> ×</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 00000000000..601f57d407d
--- /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 74526ad2ad4..16d22c17fba 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
@@ -11,6 +11,7 @@ import { SearchConfigurationService } from '../../../../core/shared/search/searc
 @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 f6af072c517..4812dd5096e 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 c48cd573042..348c46571df 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 5ca3e925a58..1fca08494c9 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -82,8 +82,8 @@
                     [inPlaceSearch]="inPlaceSearch"
                     [searchPlaceholder]="searchFormPlaceholder | translate">
     </ds-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>

From a026c65a3c6970fae8b72c00667f500a0cff813c Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 30 Nov 2023 12:14:24 +0100
Subject: [PATCH 2/2] Removed unnecessary change

---
 .../shared/search/search-labels/search-labels.component.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 4812dd5096e..f6af072c517 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); 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 *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>
 </div>