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 }} - + <:head as |H|> Secondary ID 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 @@ {{#if this.model.replicationAttrs.knownSecondaries.length}} {{#each this.model.replicationAttrs.knownSecondaries as |secondary|}} -
+
{{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``, 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) {