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 <[email protected]>
openbmc · Jul 12, 2024 · b8a2e70 · b8a2e70
1 parent 8b19ffa
commit b8a2e70
Showing 1 changed file with 3 additions and 1 deletion.
diff --git 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">