From 3e49f938164623693ece3281ea84275d386dc924 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 5 Apr 2022 13:13:43 -0700
Subject: [PATCH] 100vh body height, fix filter editor horizontal overflow

---
 .../app/components/document-list/document-list.component.html | 4 ++--
 .../app/components/document-list/document-list.component.scss | 4 ++++
 .../document-list/filter-editor/filter-editor.component.html  | 2 +-
 src-ui/src/theme.scss                                         | 4 ++++
 4 files changed, 11 insertions(+), 3 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 c7d53a848..1ce61f931 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
@@ -75,7 +75,7 @@
 
 </app-page-header>
 
-<div class="sticky-top py-2 mt-n2 mt-sm-n3 py-sm-4 bg-body mx-n3 px-3">
+<div class="row sticky-top pt-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>
@@ -185,7 +185,7 @@
     </tbody>
   </table>
 
-  <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
+  <div class="row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
     <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
   </div>
   <div *ngIf="list.documents?.length > 15" class="mt-3">
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index 09bffc731..abac427da 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -1,5 +1,9 @@
 @import "/src/theme";
 
+::ng-deep app-document-list app-page-header > div.mb-3 {
+  margin-bottom: 0 !important;
+}
+
 tr {
   user-select: none;
 }
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 61214d085..6280cff10 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
@@ -50,7 +50,7 @@
      </div>
    </div>
    <div class="w-100 d-xl-none"></div>
-   <div class="col col-xl-auto mb-2 mb-xl-0">
+   <div class="col col-xl-auto">
      <button class="btn btn-link btn-sm px-0 mx-0 ms-xl-n3" [disabled]="!rulesModified" (click)="resetSelected()">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index a6c3de95d..667809059 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -15,6 +15,10 @@
   --ngx-focus-alpha: 0.3;
 }
 
+body {
+  height: 100vh;
+}
+
 svg.logo {
   .leaf {
     fill: var(--bs-primary) !important;