From 6746e9e9e9c7ea672686629f4e60768fe00a7f59 Mon Sep 17 00:00:00 2001
From: ttyS3 <ttys3.rust@gmail.com>
Date: Thu, 3 Feb 2022 23:11:56 +0800
Subject: [PATCH 1/3] style: fix up very long word breaking the table width

---
 ui/app/styles/core/table.scss                     | 4 ++++
 ui/app/templates/allocations/allocation/index.hbs | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss
index 045e5ef1eebe..98f6b05abc7e 100644
--- a/ui/app/styles/core/table.scss
+++ b/ui/app/styles/core/table.scss
@@ -128,6 +128,10 @@
         font-weight: $weight-semibold;
       }
     }
+
+    &.ensure-break {
+      word-break: break-word;
+    }
   }
 
   thead {
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 19593ef11e16..06f60699c9f8 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="ensure-break">{{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>

From 3c560cbfc1c9d215ee425da5a1e25e2b1a90c6f3 Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Fri, 4 Feb 2022 19:19:37 -0500
Subject: [PATCH 2/3] ui: rename break-word CSS class

---
 ui/app/styles/core/table.scss                     | 10 +++++-----
 ui/app/templates/allocations/allocation/index.hbs |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss
index 98f6b05abc7e..17ea8b56afaa 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 {
@@ -128,10 +132,6 @@
         font-weight: $weight-semibold;
       }
     }
-
-    &.ensure-break {
-      word-break: break-word;
-    }
   }
 
   thead {
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 06f60699c9f8..e049e7e2443e 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 class="ensure-break">{{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>

From c8f0cc4ae197ddf85b61f2b71b1de23d12c90ce5 Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Fri, 4 Feb 2022 19:22:30 -0500
Subject: [PATCH 3/3] changelog: add entry for #11955

---
 .changelog/11995.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .changelog/11995.txt

diff --git a/.changelog/11995.txt b/.changelog/11995.txt
new file mode 100644
index 000000000000..a7c874a5e9bb
--- /dev/null
+++ b/.changelog/11995.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: break long service tags into multiple lines
+```