mail: fix css styling of expected value

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>