From 4c828c389d1f2efea05d81bbb1f4ab31f00e5710 Mon Sep 17 00:00:00 2001
From: Dan Rivera <dan.rivera@hashicorp.com>
Date: Thu, 17 Jul 2025 15:05:04 -0400
Subject: [PATCH] UI: Replication - fixing overflow issue on secondaries list /
 table (#31323)

* fixing overflow issue on secondaries lists

* add checks in tests
---
 ui/app/styles/helper-classes/general.scss                 | 4 ++++
 .../templates/components/known-secondaries-table.hbs      | 2 +-
 .../addon/templates/mode/secondaries/index.hbs            | 2 +-
 ui/tests/acceptance/enterprise-replication-test.js        | 5 +++++
 .../components/known-secondaries-table-test.js            | 8 ++++++++
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss
index 1da0c93d52..40300d0fd4 100644
--- a/ui/app/styles/helper-classes/general.scss
+++ b/ui/app/styles/helper-classes/general.scss
@@ -90,6 +90,10 @@
 
 .overflow-wrap {
   overflow-wrap: break-word;
+
+  &.word-break {
+    word-break: break-word;
+  }
 }
 
 .truncate-second-line {
diff --git a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
index b8772c8537..ca201353b8 100644
--- a/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
+++ b/ui/lib/replication/addon/templates/components/known-secondaries-table.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Hds::Table @caption="Known Secondaries" data-test-known-secondaries-table>
+<Hds::Table class="overflow-wrap word-break" @caption="Known Secondaries" data-test-known-secondaries-table>
   <:head as |H|>
     <H.Tr>
       <H.Th>Secondary ID</H.Th>
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
index e1a6797621..5d055c42e7 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
@@ -22,7 +22,7 @@
   </Toolbar>
   {{#if this.model.replicationAttrs.knownSecondaries.length}}
     {{#each this.model.replicationAttrs.knownSecondaries as |secondary|}}
-      <div class="list-item-row" data-test-secondary-name={{secondary}}>
+      <div class="list-item-row overflow-wrap" data-test-secondary-name={{secondary}}>
         <div class="columns is-mobile">
           <div class="column is-10">
             {{secondary}}
diff --git a/ui/tests/acceptance/enterprise-replication-test.js b/ui/tests/acceptance/enterprise-replication-test.js
index 52968cb72f..498b214136 100644
--- a/ui/tests/acceptance/enterprise-replication-test.js
+++ b/ui/tests/acceptance/enterprise-replication-test.js
@@ -106,6 +106,11 @@ module('Acceptance | Enterprise | replication', function (hooks) {
     assert
       .dom('[data-test-secondary-name]')
       .includesText(secondaryName, 'it displays the secondary in the list of known secondaries');
+
+    // verify overflow-wrap class is applied to secondary name
+    assert
+      .dom('[data-test-secondary-name]')
+      .hasClass('overflow-wrap', 'it applies the overflow-wrap class to the secondary name');
   });
 
   test('disabling dr primary when perf replication is enabled', async function (assert) {
diff --git a/ui/tests/integration/components/known-secondaries-table-test.js b/ui/tests/integration/components/known-secondaries-table-test.js
index e0c9f8ebb8..65a52830f4 100644
--- a/ui/tests/integration/components/known-secondaries-table-test.js
+++ b/ui/tests/integration/components/known-secondaries-table-test.js
@@ -29,6 +29,14 @@ module('Integration | Component | replication known-secondaries-table', function
     await render(hbs`<KnownSecondariesTable @secondaries={{this.secondaries}} />`, this.context);
 
     assert.dom('[data-test-known-secondaries-table]').exists();
+
+    // Verify table has overflow and word break classes applied
+    assert
+      .dom('[data-test-known-secondaries-table]')
+      .hasClass('overflow-wrap', 'it has the overflow-wrap class applied');
+    assert
+      .dom('[data-test-known-secondaries-table]')
+      .hasClass('word-break', 'it has the word-break class applied');
   });
 
   test('it shows the secondary URL and connection_status', async function (assert) {