Fix: Display multiple whitespace characters in message subject & recipient names (#238)

server/ui-src/assets/styles.scss

@@ -124,6 +124,14 @@
 	}
 }
 
+.text-spaces-nowrap {
+	white-space: pre;
+}
+
+.text-spaces {
+	white-space: pre-wrap;
+}
+
 #nav-plain-text .text-view,
 #nav-source {
 	white-space: pre;

server/ui-src/components/ListMessages.vue

@@ -122,13 +122,13 @@ export default {
 						{{ getRelativeCreated(message) }}
 					</div>
 					<div class="text-truncate d-lg-none privacy">
-						<span v-if="message.From" :title="message.From.Address">{{
+						<span v-if="message.From" :title="'From: ' + message.From.Address">{{
 							message.From.Name ?
 							message.From.Name : message.From.Address
 						}}</span>
 					</div>
 					<div class="text-truncate d-none d-lg-block privacy">
-						<b v-if="message.From" :title="message.From.Address">{{
+						<b v-if="message.From" :title="'From: ' + message.From.Address">{{
 							message.From.Name ?
 							message.From.Name : message.From.Address
 						}}</b>
@@ -141,7 +141,7 @@ export default {
 					</div>
 				</div>
 				<div class="col-lg-6 col-xxl-7 mt-2 mt-lg-0">
-					<div class="subject text-truncate">
+					<div class="subject text-truncate text-spaces-nowrap">
 						<b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b>
 					</div>
 					<div v-if="message.Snippet != ''" class="small text-muted text-truncate">

server/ui-src/components/message/Message.vue

@@ -234,7 +234,7 @@ export default {
 							<th class="small">From</th>
 							<td class="privacy">
 								<span v-if="message.From">
-									<span v-if="message.From.Name">{{ message.From.Name + " " }}</span>
+									<span v-if="message.From.Name" class="text-spaces">{{ message.From.Name + " " }}</span>
 									<span v-if="message.From.Address" class="small">
 										&lt;<a :href="searchURI(message.From.Address)" class="text-body">
 											{{ message.From.Address }}
@@ -252,7 +252,7 @@ export default {
 								<span v-if="message.To && message.To.length" v-for="(t, i) in message.To">
 									<template v-if="i > 0">, </template>
 									<span>
-										{{ t.Name }}
+										<span class="text-spaces">{{ t.Name }}</span>
 										&lt;<a :href="searchURI(t.Address)" class="text-body">
 											{{ t.Address }}
 										</a>&gt;
@@ -266,7 +266,7 @@ export default {
 							<td class="privacy">
 								<span v-for="(t, i) in message.Cc">
 									<template v-if="i > 0">,</template>
-									{{ t.Name }}
+									<span class="text-spaces">{{ t.Name }}</span>
 									&lt;<a :href="searchURI(t.Address)" class="text-body">
 										{{ t.Address }}
 									</a>&gt;
@@ -278,7 +278,7 @@ export default {
 							<td class="privacy">
 								<span v-for="(t, i) in message.Bcc">
 									<template v-if="i > 0">,</template>
-									{{ t.Name }}
+									<span class="text-spaces">{{ t.Name }}</span>
 									&lt;<a :href="searchURI(t.Address)" class="text-body">
 										{{ t.Address }}
 									</a>&gt;
@@ -290,7 +290,7 @@ export default {
 							<td class="privacy text-body-secondary text-break">
 								<span v-for="(t, i) in message.ReplyTo">
 									<template v-if="i > 0">,</template>
-									{{ t.Name }}
+									<span class="text-spaces">{{ t.Name }}</span>
 									&lt;<a :href="searchURI(t.Address)" class="text-body-secondary">
 										{{ t.Address }}
 									</a>&gt;
@@ -309,7 +309,7 @@ export default {
 						<tr>
 							<th class="small">Subject</th>
 							<td>
-								<strong v-if="message.Subject != ''">{{ message.Subject }}</strong>
+								<strong v-if="message.Subject != ''" class="text-spaces">{{ message.Subject }}</strong>
 								<small class="text-body-secondary" v-else>[ no subject ]</small>
 							</td>
 						</tr>