From 89064368242172e56de70153ebeb9daa2287df71 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Thu, 26 Feb 2026 02:03:21 +0100
Subject: [PATCH] mail: fix css styling of expected value

---
 dashboard/src/components/MailDomainStatus.vue | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/MailDomainStatus.vue b/dashboard/src/components/MailDomainStatus.vue
index 0e6475283..e346b1afa 100644
--- a/dashboard/src/components/MailDomainStatus.vue
+++ b/dashboard/src/components/MailDomainStatus.vue
@@ -119,9 +119,9 @@ onMounted(async () => {
                   <td>{{ domainStatus[key].type }}</td>
                 </tr>
                 <tr>
-                  <td>{{ $t('email.dnsStatus.expected') }}:</td>
-                  <td style="display: flex; gap: 6px">
-                    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ domainStatus[key].expected }}</div>
+                  <td class="domain-status-expected-label">{{ $t('email.dnsStatus.expected') }}:</td>
+                  <td class="domain-status-expected-value">
+                    <div class="domain-status-expected">{{ domainStatus[key].expected }}</div>
                     <ClipboardAction :value="domainStatus[key].expected"/>
                   </td>
                 </tr>
@@ -232,9 +232,19 @@ onMounted(async () => {
   padding-right: 20px;
 }
 
-/* The overflow scroll is there, but I just can't scroll the text! WHY?! */
-/* .domain-status > tbody > tr > td:nth-child(2) {
-  overflow: scroll;
-} */
+.domain-status-expected-label {
+  vertical-align: top;
+}
+
+.domain-status-expected-value {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.domain-status-expected {
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
 
 </style>