hide overflow of long tags

close #1321
CentreForDigitalHumanities · Nov 23, 2023 · 9491a0f · 9491a0f
1 parent e0f686c
commit 9491a0f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,3 +1,11 @@
 .tag-input {
     height: 2em;
 }
+
+.field {
+    max-width: 100%;
+
+    .control {
+        max-width: 80%;
+    }
+}