From 3fc73896a0fc3266b6e09492f396cbb7f34b0eaa Mon Sep 17 00:00:00 2001
From: ttys3 <41882455+ttys3@users.noreply.github.com>
Date: Sat, 5 Feb 2022 08:40:03 +0800
Subject: [PATCH] style: fix up very long tag word breaking the allocation
 service table width (#11995)

---
 .changelog/11995.txt                              | 3 +++
 ui/app/styles/core/table.scss                     | 6 +++++-
 ui/app/templates/allocations/allocation/index.hbs | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changelog/11995.txt

diff --git a/.changelog/11995.txt b/.changelog/11995.txt
new file mode 100644
index 000000000..a7c874a5e
--- /dev/null
+++ 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
index 045e5ef1e..17ea8b56a 100644
--- 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
index 19593ef11..e049e7e24 100644
--- 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>