From 14cbcb4af60fd16474560bde7082c86f29de9150 Mon Sep 17 00:00:00 2001
From: dragere <hjahn25@gmail.com>
Date: Mon, 23 May 2022 19:28:29 +0200
Subject: [PATCH 1/3] Allow line breaks in Tags

---
 src-ui/src/styles.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 7a566fbb9..ab9147b23 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -497,6 +497,8 @@ table.table {
 // Bootstrap 5 tweaks
 a.badge {
   text-decoration: none;
+  word-break: initial;
+  white-space: initial;
 }
 
 .btn-link {

From 400f1d37bf8fcc4508c4d40ea470607d332d8127 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 23 May 2022 11:24:08 -0700
Subject: [PATCH 2/3] Revert "Allow line breaks in Tags"

This reverts commit 14cbcb4af60fd16474560bde7082c86f29de9150.
---
 src-ui/src/styles.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index ab9147b23..7a566fbb9 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -497,8 +497,6 @@ table.table {
 // Bootstrap 5 tweaks
 a.badge {
   text-decoration: none;
-  word-break: initial;
-  white-space: initial;
 }
 
 .btn-link {

From 5bbcc7f2f7c067f5b74d20c0ebb62f3e66918109 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 23 May 2022 11:24:13 -0700
Subject: [PATCH 3/3] Better handle long tag names

---
 src-ui/src/app/components/common/tag/tag.component.scss   | 3 +++
 .../document-card-small.component.html                    | 6 ++----
 .../document-card-small.component.scss                    | 8 ++++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/common/tag/tag.component.scss b/src-ui/src/app/components/common/tag/tag.component.scss
index 903e9bfdb..d5d77448d 100644
--- a/src-ui/src/app/components/common/tag/tag.component.scss
+++ b/src-ui/src/app/components/common/tag/tag.component.scss
@@ -1,3 +1,6 @@
 a {
     cursor: pointer;
+    white-space: normal;
+    word-break: break-word;
+    text-align: end;
 }
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 431454fe5..a27b23d37 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -10,10 +10,8 @@
         </div>
       </div>
 
-      <div style="top: 0; right: 0; font-size: large" class="text-end position-absolute me-1">
-        <div *ngFor="let t of getTagsLimited$() | async">
-          <app-tag [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
-        </div>
+      <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6">
+        <app-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
         <div *ngIf="moreTags">
           <span class="badge badge-secondary">+ {{moreTags}}</span>
         </div>
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 4d03d0a4d..6ccbba0c2 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -78,3 +78,11 @@
 a {
   cursor: pointer;
 }
+
+.tags {
+  top: 0;
+  right: 0;
+  max-width: 80%;
+  row-gap: .2rem;
+  line-height: 1;
+}