commit b8a2e704bdf67a55986302f3d4ada1e707b2bb52
author Farah Rasheed <Farah.Rasheed1@dell.com> Fri Jul 05 10:30:31 2024 -0500
committer Sivaprabu Ganesan <sivaprabug@ami.com> Fri Jul 12 02:42:04 2024 +0000
tree 4a111cbc5261c6b3a1d5e11cebbf807806252078
parent 8b19ffa2299878a49a8757d811a399c8175acc92

Update network hostname display style

Add 'word-break: break-all' CSS property to ensure long
hostnames wrap properly within their container. This
prevents overflow issues that occur with long hostnames
without spaces. Fixes #111

The change improves the readability and layout
consistency of the network information display in the
NetworkGlobalSettings view.

Change-Id: I142d18b9507f6ae0a90778e5a338b015507c9d79
Signed-off-by: Farah Rasheed <Farah.Rasheed1@dell.com>

src/views/Settings/Network/NetworkGlobalSettings.vue

diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue
index db83404..0c062ea 100644
--- a/src/views/Settings/Network/NetworkGlobalSettings.vue
+++ b/src/views/Settings/Network/NetworkGlobalSettings.vue
@@ -12,7 +12,9 @@
               <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" />
             </b-button>
           </dt>
-          <dd>{{ dataFormatter(firstInterface.hostname) }}</dd>
+          <dd style="word-break: break-all">
+            {{ dataFormatter(firstInterface.hostname) }}
+          </dd>
         </dl>
       </b-col>
       <b-col md="2">