From 33115567db026696dba68535c045c1af40b29e51 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Fri, 11 May 2018 12:21:07 +0100
Subject: [PATCH] fix search filter styles (#3313)

---
 .../search-filter.component.html              | 48 ++++++++++---------
 .../search-filter.component.scss              |  5 +-
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/lib/content-services/search/components/search-filter/search-filter.component.html b/lib/content-services/search/components/search-filter/search-filter.component.html
index 9a3036c270..6cb593290c 100644
--- a/lib/content-services/search/components/search-filter/search-filter.component.html
+++ b/lib/content-services/search/components/search-filter/search-filter.component.html
@@ -21,17 +21,19 @@
         <mat-expansion-panel-header>
             <mat-panel-title>{{ facetQueriesLabel | translate }}</mat-panel-title>
         </mat-expansion-panel-header>
-        <mat-form-field class="facet-result-filter">
-            <input
-                matInput
-                placeholder="{{ 'SEARCH.FILTER.ACTIONS.FILTER-CATEGORY' | translate }}"
-                [(ngModel)]="responseFacetQueries.filterText">
-            <button *ngIf="responseFacetQueries.filterText"
-                mat-button matSuffix mat-icon-button
-                (click)="responseFacetQueries.filterText = ''">
-                <mat-icon>close</mat-icon>
-            </button>
-        </mat-form-field>
+        <div class="facet-result-filter">
+            <mat-form-field>
+                <input
+                    matInput
+                    placeholder="{{ 'SEARCH.FILTER.ACTIONS.FILTER-CATEGORY' | translate }}"
+                    [(ngModel)]="responseFacetQueries.filterText">
+                <button *ngIf="responseFacetQueries.filterText"
+                    mat-button matSuffix mat-icon-button
+                    (click)="responseFacetQueries.filterText = ''">
+                    <mat-icon>close</mat-icon>
+                </button>
+            </mat-form-field>
+        </div>
         <div class="checklist">
             <ng-container *ngFor="let query of responseFacetQueries">
                 <mat-checkbox
@@ -66,17 +68,19 @@
             <mat-panel-title>{{ field.label }}</mat-panel-title>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="facet-result-filter">
-            <input
-                matInput
-                placeholder="{{ 'SEARCH.FILTER.ACTIONS.FILTER-CATEGORY' | translate }}"
-                [(ngModel)]="field.buckets.filterText">
-            <button *ngIf="field.buckets.filterText"
-                mat-button matSuffix mat-icon-button
-                (click)="field.buckets.filterText = ''">
-                <mat-icon>close</mat-icon>
-            </button>
-        </mat-form-field>
+        <div class="facet-result-filter">
+            <mat-form-field>
+                <input
+                    matInput
+                    placeholder="{{ 'SEARCH.FILTER.ACTIONS.FILTER-CATEGORY' | translate }}"
+                    [(ngModel)]="field.buckets.filterText">
+                <button *ngIf="field.buckets.filterText"
+                    mat-button matSuffix mat-icon-button
+                    (click)="field.buckets.filterText = ''">
+                    <mat-icon>close</mat-icon>
+                </button>
+            </mat-form-field>
+        </div>
 
         <div class="checklist">
             <mat-checkbox
diff --git a/lib/content-services/search/components/search-filter/search-filter.component.scss b/lib/content-services/search/components/search-filter/search-filter.component.scss
index b4d49f4ba6..e2bab4350b 100644
--- a/lib/content-services/search/components/search-filter/search-filter.component.scss
+++ b/lib/content-services/search/components/search-filter/search-filter.component.scss
@@ -10,9 +10,10 @@
     }
 
     .facet-result-filter {
-        width: 100%;
+        display: flex;
+        flex-direction: column;
 
-        input > {
+        & > * {
             width: 100%;
         }
     }