From 55c4c690ef8eec3ba494cd6c3a74dc9b5cd810ec Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 18 Dec 2020 01:13:30 -0800
Subject: [PATCH] Fix wrapping with multiple tags, embiggen tags, pretty icons

---
 .../common/input/tags/tags.component.html     | 21 ++++++++++++-------
 .../common/input/tags/tags.component.scss     |  8 +++++++
 src-ui/src/styles.scss                        |  2 +-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 89e391813..8a5dbc4f2 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -1,7 +1,7 @@
 <div class="form-group paperless-input-select paperless-input-tags">
   <label for="tags">Tags</label>
 
-  <div class="input-group">
+  <div class="input-group flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
       [multiple]="true"
       [closeOnSelect]="false"
@@ -9,15 +9,22 @@
       (change)="ngSelectChange()">
 
       <ng-template ng-label-tmp let-item="item">
-          <app-tag style="background-color: none;" [tag]="getTag(item.id)" (click)="removeTag(item.id)"></app-tag>
+        <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
+          <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+          </svg>
+          <app-tag style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
+        </span>
       </ng-template>
       <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-        <div class="selected-icon d-inline-block mr-1">
-          <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
-          </svg>
+        <div class="tag-wrap">
+          <div class="selected-icon d-inline-block mr-1">
+            <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+            </svg>
+          </div>
+          <app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
         </div>
-        <app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
       </ng-template>
     </ng-select>
 
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.scss b/src-ui/src/app/components/common/input/tags/tags.component.scss
index 41fc6acc4..2eaaa4f6d 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.scss
+++ b/src-ui/src/app/components/common/input/tags/tags.component.scss
@@ -2,3 +2,11 @@
   min-width: 1em;
   min-height: 1em;
 }
+
+.tag-wrap {
+  font-size: 1rem;
+}
+
+.tag-wrap-delete {
+  cursor: pointer;
+}
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 0dc662e31..ffb296271 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -71,7 +71,7 @@ body {
     position: relative;
     flex: 1 1 auto;
     margin-bottom: 0;
-    height: calc(1.5em + 0.75rem + 5px);
+    min-height: calc(1.5em + 0.75rem + 5px);
     line-height: 1.5;
 
     .ng-select-container {