[ADF-3734] Fix search filters not wrapping (#3955)

* [ADF-3734] Fix search filters not wrapping

* [ADF-3734] Improve search filter bucket selector

demo-shell/src/app/components/search/search-result.component.html

@@ -3,7 +3,7 @@
 </div>
 
 <div class="adf-search-results">
-    <adf-search-filter #searchFilter></adf-search-filter>
+    <adf-search-filter class="adf-search-settings" #searchFilter></adf-search-filter>
 
     <div class="adf-search-results__content">
         <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>

e2e/pages/adf/content_services/search/components/search-checkList.ts

@@ -119,7 +119,7 @@ export class SearchCheckListPage {
         let bucketNumber = fileTypeFilter.getText().then((valueOfBucket) => {
             let numberOfBucket = valueOfBucket.split('(')[1];
             let totalNumberOfBucket = numberOfBucket.split(')')[0];
-            return totalNumberOfBucket;
+            return totalNumberOfBucket.trim();
         });
 
         return bucketNumber;

lib/content-services/search/components/search-check-list/search-check-list.component.html

@@ -3,8 +3,15 @@
         *ngFor="let option of options"
         [checked]="option.checked"
         [attr.data-automation-id]="'checkbox-' + (option.name)"
-        (change)="changeHandler($event, option)">
-        {{ option.name | translate }}
+        (change)="changeHandler($event, option)"
+        class="facet-filter">
+        <div 
+            matTooltip="{{ option.name | translate }}"
+            matTooltipPosition="right"
+            class="facet-name">
+            {{ option.name | translate }}
+        </div>
+        
     </mat-checkbox>
 </div>
 

lib/content-services/search/components/search-check-list/search-check-list.component.scss

@@ -1,4 +1,22 @@
 .adf-search-check-list {
     display: flex;
     flex-direction: column;
+
+    .facet-filter {
+        .mat-checkbox-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            width: 100%;
+        }
+    
+        .mat-checkbox-layout {
+            width: 100%;
+        }
+
+        .facet-name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
 }

lib/content-services/search/components/search-filter/search-filter.component.html

@@ -41,7 +41,12 @@
                         [checked]="query.checked"
                         [attr.data-automation-id]="'checkbox-'+facetQueriesLabel+'-'+query.label"
                         (change)="onToggleFacetQuery($event, query)">
-                        {{ query.label | translate }} ({{ query.count }})
+                        <div 
+                            matTooltip="{{ query.label | translate }} ({{ query.count }})"
+                            matTooltipPosition="right"
+                            class="facet-label">
+                            {{ query.label | translate }} ({{ query.count }})
+                        </div>
                     </mat-checkbox>
                 </ng-container>
             </div>
@@ -96,7 +101,15 @@
                     [checked]="bucket.checked"
                     [attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)"
                     (change)="onToggleBucket($event, field, bucket)">
-                    {{ bucket.display || bucket.label | translate }} <span *ngIf="bucket.count!==null">(</span>{{ bucket.count }}<span *ngIf="bucket.count!==null">)</span>
+                    <div 
+                        matTooltip="{{ bucket.display || bucket.label | translate }}"
+                        matTooltipPosition="right"
+                        class="facet-label">
+                        {{ bucket.display || bucket.label | translate }} 
+                        <span *ngIf="bucket.count!==null">(</span>
+                        {{ bucket.count }}
+                        <span *ngIf="bucket.count!==null">)</span>
+                    </div>
                 </mat-checkbox>
             </div>
 

lib/content-services/search/components/search-filter/search-filter.component.scss

@@ -4,6 +4,22 @@
         display: flex;
         flex-direction: column;
 
+        .mat-checkbox-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            width: 100%;
+        }
+    
+        .mat-checkbox-layout {
+            width: 100%;
+        }
+
+        .facet-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
         .mat-checkbox {
             margin: 5px;
 

lib/content-services/search/components/search-radio/search-radio.component.html

@@ -3,8 +3,14 @@
     (change)="changeHandler($event)">
     <mat-radio-button
         *ngFor="let option of options"
-        [value]="option.value">
-        {{ option.name | translate }}
+        [value]="option.value"
+        class="facet-filter">
+        <div 
+            matTooltip="{{ option.name | translate }}"
+            matTooltipPosition="right"
+            class="filter-label">
+            {{ option.name | translate }}
+        </div>
     </mat-radio-button>
 </mat-radio-group>
 

lib/content-services/search/components/search-radio/search-radio.component.scss

@@ -1,10 +1,28 @@
 .adf-search-radio {
     .mat-radio-group {
-        display: inline-flex;
+        display: flex;
         flex-direction: column;
     }
 
     .mat-radio-button {
         margin: 5px;
     }
+
+    .facet-filter {
+        .mat-radio-label-content {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            width: 100%;
+        }
+    
+        .mat-radio-label {
+            width: 100%;
+        }
+
+        .filter-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
 }