style: fix up very long word breaking the table width

hashicorp · Feb 3, 2022 · 1909d1b · 1909d1b
1 parent 5a32783
commit 1909d1b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
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;
@@ -128,6 +128,10 @@
         font-weight: $weight-semibold;
       }
     }
+
+    break-word {
+      word-break: break-word;
+    }
   }
 
   thead {

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="break-word">{{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>