From 133b36c34c4fe9ec3eb0b6bdb8d0f1f1a547d065 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Thu, 11 Aug 2022 00:32:10 +1200
Subject: [PATCH] UI: Change breakpoints for mobile view of messages

---
 server/ui-src/App.vue            | 16 ++++++++--------
 server/ui-src/assets/styles.scss | 11 ++++++++++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 8d6467e..ac135e2 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -443,33 +443,33 @@ export default {
 				<div class="list-group" v-if="items.length">
 					<a v-for="message in items" :href="'#'+message.ID" class="row message d-flex small list-group-item list-group-item-action"
 						:class="message.Read ? 'read':''" XXXv-on:click="openMessage(message)">
-						<div class="col-md-3">
-							<div class="d-md-none float-end text-muted text-nowrap small">
+						<div class="col-lg-3">
+							<div class="d-lg-none float-end text-muted text-nowrap small">
 								<i class="bi bi-paperclip h6 me-1" v-if="message.Attachments"></i>
 								{{ getRelativeCreated(message) }}
 							</div>
 
-							<div class="text-truncate d-md-none privacy">
+							<div class="text-truncate d-lg-none privacy">
 								<span v-if="message.From" :title="message.From.Address">{{ message.From.Name ? message.From.Name : message.From.Address }}</span>
 							</div> 
-							<div class="text-truncate d-none d-md-block privacy">
+							<div class="text-truncate d-none d-lg-block privacy">
 								<b v-if="message.From" :title="message.From.Address">{{ message.From.Name ? message.From.Name : message.From.Address }}</b>
 							</div>
-							<div class="d-none d-md-block text-truncate text-muted small privacy">
+							<div class="d-none d-lg-block text-truncate text-muted small privacy">
 								{{ getPrimaryEmailTo(message) }}
 								<span v-if="message.To && message.To.length > 1">
 									[+{{message.To.length - 1}}]
 								</span>
 							</div>
 						</div>
-						<div class="col-md-6 mt-2 mt-md-0">
+						<div class="col-lg-6 mt-2 mt-lg-0">
 							<b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b>
 						</div>
-						<div class="d-none d-md-block col-1 small text-end text-muted">
+						<div class="d-none d-lg-block col-1 small text-end text-muted">
 							<i class="bi bi-paperclip float-start h6" v-if="message.Attachments"></i>
 							{{ getFileSize(message.Size) }}
 						</div>
-						<div class="d-none d-md-block col-2 small text-end text-muted">
+						<div class="d-none d-lg-block col-2 small text-end text-muted">
 							{{ getRelativeCreated(message) }}
 						</div>
 					</a>
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index 7e77772..75c0196 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -44,6 +44,7 @@
     font-family: Courier New, Courier, System, fixed-width;
     font-size: 0.85em;
 }
+
 #nav-plain-text {
     white-space: pre-wrap;
 }
@@ -52,7 +53,7 @@
     margin: 15px 0 0;
 
     th {
-        padding-right: 10px;
+        padding-right: 1.5rem;
         font-weight: normal;
         vertical-align: top;
     }
@@ -62,6 +63,14 @@
     }
 }
 
+#nav-html {
+    padding-right: 1.5rem;
+}
+
+#preview-html {
+    min-height: 300px;
+}
+
 .list-group-item:first-child {
     border-top: 0;
 }