From b391dd6a3fbe78ad9f2c9608a568072db2f8c075 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 11 May 2022 23:09:22 -0700
Subject: [PATCH] Improve mobile filter editor layout with long languages

---
 .../document-list/document-list.component.html     |  9 +++++----
 .../filter-editor/filter-editor.component.html     | 14 +++++++-------
 .../filter-editor/filter-editor.component.scss     |  4 ++--
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index e00e54333..4a15fe976 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -1,10 +1,11 @@
 <app-page-header [title]="getTitle()">
 
-  <div ngbDropdown class="me-2 flex-fill d-flex">
-    <button class="btn btn-sm btn-outline-primary flex-fill" id="dropdownSelect" ngbDropdownToggle>
+  <div ngbDropdown class="me-2 d-flex">
+    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
-      </svg>&nbsp;<ng-container i18n>Select</ng-container>
+      </svg>
+      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
       <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
@@ -75,7 +76,7 @@
 
 </app-page-header>
 
-<div class="row sticky-top pt-4 pb-2 pb-lg-4 bg-body">
+<div class="row sticky-top pt-3 pt-sm-4 pb-2 pb-lg-4 bg-body">
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 6280cff10..9dac17fbf 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -13,9 +13,9 @@
      </div>
   </div>
   <div class="w-100 d-xl-none"></div>
-    <div class="col col-xl-auto mb-2 mb-xl-0">
-      <div class="d-flex">
-        <app-filterable-dropdown class="me-2 flex-fill" title="Tags" icon="tag-fill" i18n-title
+    <div class="col col-xl-auto">
+      <div class="d-flex flex-wrap">
+        <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
           [items]="tags"
           [(selectionModel)]="tagSelectionModel"
@@ -23,26 +23,26 @@
           [multiple]="true"
           (open)="onTagsDropdownOpen()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="me-2 flex-fill" title="Correspondent" icon="person-fill" i18n-title
+        <app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
           [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
           (selectionModelChange)="updateRules()"
           (open)="onCorrespondentDropdownOpen()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="me-2 flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
+        <app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
           filterPlaceholder="Filter document types" i18n-filterPlaceholder
           [items]="documentTypes"
           [(selectionModel)]="documentTypeSelectionModel"
           (open)="onDocumentTypeDropdownOpen()"
           (selectionModelChange)="updateRules()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-date-dropdown class="me-2"
+        <app-date-dropdown class="mb-2 mb-xl-0"
           title="Created" i18n-title
           (datesSet)="updateRules()"
           [(dateBefore)]="dateCreatedBefore"
           [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
-        <app-date-dropdown
+        <app-date-dropdown class="mb-2 mb-xl-0"
           [(dateBefore)]="dateAddedBefore"
           [(dateAfter)]="dateAddedAfter"
           title="Added" i18n-title
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
index d34afd57c..6bfe1448d 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
@@ -14,6 +14,6 @@
   border-bottom-right-radius: 0;
 }
 
-.me-2 {
-  margin-right: 0.7rem !important; // tweak to make room for badges
+.d-flex.flex-wrap {
+  column-gap: 0.7rem;
 }