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 903e9bfdb3799c11ef11ab52899bb6fd6878c70e..d5d77448d94ba341d8bc6e0c1f45faaeae2de75f 100644 (file)
--- 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 431454fe50eaabd7e1792decbc4f8a2dc09a64a7..a27b23d3778389061254a217a1ed4a9c4ad7d303 100644 (file)
--- 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 4d03d0a4d7ea82dba42925a3efaa8d38e5e73067..6ccbba0c2b390ea875cedb0f11885d1861eedf17 100644 (file)
--- 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;
+}