style: fix up very long tag word breaking the allocation service tabl…

…e width (#11995)
hashicorp · Feb 5, 2022 · 3fc7389 · 3fc7389
1 parent 16485f4
commit 3fc7389
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/.changelog/11995.txt b/.changelog/11995.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: break long service tags into multiple lines
+```
diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss
@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 .table {
   color: $text;
@@ -103,6 +103,10 @@
       }
     }
 
+    &.is-long-text {
+      word-break: break-word;
+    }
+
     // Only use px modifiers when text needs to be truncated.
     // In this and only this scenario are percentages not effective.
     &.is-200px {

diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
@@ -173,7 +173,7 @@
             <tr data-test-service>
               <td data-test-service-name>{{row.model.name}}</td>
               <td data-test-service-port>{{row.model.portLabel}}</td>
-              <td data-test-service-tags>{{join ", " row.model.tags}}</td>
+              <td data-test-service-tags class="is-long-text">{{join ", " row.model.tags}}</td>
               <td data-test-service-onupdate>{{row.model.onUpdate}}</td>
               <td data-test-service-connect>{{if row.model.connect "Yes" "No"}}</td>
               <td data-test-service-upstreams>