From 063eab2c6add942ca17d561d43afcdf9cc98e379 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sat, 23 Sep 2023 09:31:02 +1200
Subject: [PATCH] UI: Better support for mobile screen sizes

---
 server/ui-src/assets/styles.scss             |  6 ++++++
 server/ui-src/components/message/Message.vue |  6 +++---
 server/ui-src/views/MessageView.vue          | 10 +++++-----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index d2f500d..cadff15 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -228,6 +228,12 @@
 	}
 }
 
+.messageHeaders {
+	th {
+		vertical-align: top;
+	}
+}
+
 .list-group-item.message:first-child {
 	border-top: 0;
 }
diff --git a/server/ui-src/components/message/Message.vue b/server/ui-src/components/message/Message.vue
index 5b07f2d..dda9750 100644
--- a/server/ui-src/components/message/Message.vue
+++ b/server/ui-src/components/message/Message.vue
@@ -245,7 +245,7 @@ export default {
 							<td class="privacy">
 								<span v-if="message.To && message.To.length" v-for="(t, i) in message.To">
 									<template v-if="i > 0">, </template>
-									<span class="text-nowrap">{{ t.Name + " &lt;" + t.Address + "&gt;" }}</span>
+									<span>{{ t.Name + " &lt;" + t.Address + "&gt;" }}</span>
 								</span>
 								<span v-else class="text-body-secondary">[Undisclosed recipients]</span>
 							</td>
@@ -269,7 +269,7 @@ export default {
 						</tr>
 						<tr v-if="message.ReplyTo && message.ReplyTo.length" class="small">
 							<th class="text-nowrap">Reply-To</th>
-							<td class="privacy text-body-secondary">
+							<td class="privacy text-body-secondary text-break">
 								<span v-for="(t, i) in message.ReplyTo">
 									<template v-if="i > 0">,</template>
 									{{ t.Name + " &lt;" + t.Address + "&gt;" }} </span>
@@ -277,7 +277,7 @@ export default {
 						</tr>
 						<tr v-if="message.ReturnPath && message.ReturnPath != message.From.Address" class="small">
 							<th class="text-nowrap">Return-Path</th>
-							<td class="privacy text-body-secondary">&lt;{{ message.ReturnPath }}&gt;</td>
+							<td class="privacy text-body-secondary text-break">&lt;{{ message.ReturnPath }}&gt;</td>
 						</tr>
 						<tr>
 							<th class="small">Subject</th>
diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue
index 9d8dbf7..210b2b1 100644
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -195,17 +195,17 @@ export default {
 			</RouterLink>
 		</div>
 		<div class="col col-md-4k col-lg-5 col-xl-6">
-			<button @click="goBack()" class="btn btn-outline-light me-4 d-md-none" title="Return to messages">
+			<button @click="goBack()" class="btn btn-outline-light me-3 me-sm-4 d-md-none" title="Return to messages">
 				<i class="bi bi-arrow-return-left"></i>
 			</button>
-			<button class="btn btn-outline-light me-2" title="Mark unread" v-on:click="markUnread">
+			<button class="btn btn-outline-light me-1 me-sm-2" title="Mark unread" v-on:click="markUnread">
 				<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
 			</button>
-			<button class="btn btn-outline-light me-2" title="Release message"
+			<button class="btn btn-outline-light me-1 me-sm-2" title="Release message"
 				v-if="mailbox.uiConfig.MessageRelay && mailbox.uiConfig.MessageRelay.Enabled" v-on:click="initReleaseModal">
 				<i class="bi bi-send"></i> <span class="d-none d-md-inline">Release</span>
 			</button>
-			<button class="btn btn-outline-light me-2" title="Delete message" v-on:click="deleteMessage">
+			<button class="btn btn-outline-light me-1 me-sm-2" title="Delete message" v-on:click="deleteMessage">
 				<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
 			</button>
 		</div>
@@ -267,7 +267,7 @@ export default {
 				</ul>
 			</div>
 
-			<RouterLink :to="'/view/' + prevLink" class="btn btn-outline-light ms-2 me-1"
+			<RouterLink :to="'/view/' + prevLink" class="btn btn-outline-light ms-1 ms-sm-2 me-1"
 				:class="prevLink ? '' : 'disabled'" title="View previous message">
 				<i class="bi bi-caret-left-fill"></i>
 			</RouterLink>