From 9491a0f61051dfb0824a41b76bfe221f39d32591 Mon Sep 17 00:00:00 2001
From: Luka van der Plas <lukavdplas@gmail.com>
Date: Thu, 23 Nov 2023 15:42:58 +0100
Subject: [PATCH] hide overflow of long tags

close #1321
---
 frontend/src/app/dropdown/dropdown.component.scss   | 13 +++++++++++++
 .../tag/document-tags/document-tags.component.html  |  8 +++++---
 .../tag/document-tags/document-tags.component.scss  | 13 +++++++++++++
 .../app/tag/tag-select/tag-select.component.scss    |  8 ++++++++
 4 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/dropdown/dropdown.component.scss b/frontend/src/app/dropdown/dropdown.component.scss
index c5d28eccf..49ad11278 100644
--- a/frontend/src/app/dropdown/dropdown.component.scss
+++ b/frontend/src/app/dropdown/dropdown.component.scss
@@ -9,3 +9,16 @@
         color: $text-invert !important;
     }
 }
+
+.dropdown {
+    max-width: 100%;
+}
+
+.dropdown-trigger {
+    max-width: 100%;
+
+    .button {
+        max-width: 100%;
+        overflow: hidden;
+    }
+}
diff --git a/frontend/src/app/tag/document-tags/document-tags.component.html b/frontend/src/app/tag/document-tags/document-tags.component.html
index a38716edf..1224e3398 100644
--- a/frontend/src/app/tag/document-tags/document-tags.component.html
+++ b/frontend/src/app/tag/document-tags/document-tags.component.html
@@ -1,7 +1,9 @@
 <div class="field is-grouped is-grouped-multiline" *ngIf="(document?.tags$ | async) as tags">
     <div class="control tags has-addons" *ngFor="let tag of tags">
-        <span class="tag is-primary">
-            {{tag.name}}
+        <span class="tag is-primary tag-name">
+            <span class="name">
+                {{tag.name}}
+            </span>
         </span>
         <button class="button tag" [attr.aria-label]="'remove tag ' + tag.name"
             iaBalloon="remove this tag" iaBalloonPosition="up"
@@ -10,7 +12,7 @@
         </button>
     </div>
 
-    <div class="control" style="max-width: 100%;" >
+    <div class="control">
         <ng-container *ngIf="showAddNew; else toggleAddNew">
             <ia-tag-select [exclude]="tags" (selection)="addTag($event)" (cancel)="showAddNew = false"></ia-tag-select>
         </ng-container>
diff --git a/frontend/src/app/tag/document-tags/document-tags.component.scss b/frontend/src/app/tag/document-tags/document-tags.component.scss
index e69de29bb..229a5c4dc 100644
--- a/frontend/src/app/tag/document-tags/document-tags.component.scss
+++ b/frontend/src/app/tag/document-tags/document-tags.component.scss
@@ -0,0 +1,13 @@
+.control {
+    max-width: 100%;
+}
+
+.tag-name {
+    max-width: 80%;
+
+    .name {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
diff --git a/frontend/src/app/tag/tag-select/tag-select.component.scss b/frontend/src/app/tag/tag-select/tag-select.component.scss
index 6ec645475..0eb1d05ed 100644
--- a/frontend/src/app/tag/tag-select/tag-select.component.scss
+++ b/frontend/src/app/tag/tag-select/tag-select.component.scss
@@ -1,3 +1,11 @@
 .tag-input {
     height: 2em;
 }
+
+.field {
+    max-width: 100%;
+
+    .control {
+        max-width: 80%;
+    }
+}