108595: fix for overflowing search filter badge selection

Author: LotteHofstede

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>

src/app/shared/search/search-labels/search-label/search-label.component.scss

@@ -0,0 +1,3 @@
+.badge {
+  white-space: inherit;
+}

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']                                                        ,
 })
 
 /**

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>

src/app/shared/search/search-labels/search-labels.component.scss

@@ -1,3 +1,10 @@
 :host {
     line-height: 1;
-}
+  .labels {
+    margin: 0 calc(-1 * var(--bs-spacer)/8);
+    ds-search-label {
+      display: inline-block;
+      padding: 0 calc(var(--bs-spacer)/8);
+    }
+  }
+}

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>