From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 23 May 2022 18:24:13 +0000 (-0700)
Subject: Better handle long tag names
X-Git-Tag: v1.8.0-beta.rc1~89^2
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F1009%2Fhead;p=thirdparty%2Fpaperless-ngx.git

Better handle long tag names
---

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 903e9bfdb3..d5d77448d9 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 431454fe50..a27b23d377 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 4d03d0a4d7..6ccbba0c2b 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;
+}