From 1afd138cc5959fe18f6140f46ec6814b494a59b2 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sat, 16 Nov 2024 15:21:45 +1300
Subject: [PATCH] Chore: Minor UI tweaks

---
 server/ui-src/components/AboutMailpit.vue    |   4 +-
 server/ui-src/components/message/Message.vue | 224 +++++++++----------
 server/ui-src/views/MailboxView.vue          |   2 +-
 server/ui-src/views/MessageView.vue          |   2 +-
 server/ui-src/views/SearchView.vue           |   2 +-
 5 files changed, 115 insertions(+), 119 deletions(-)

diff --git a/server/ui-src/components/AboutMailpit.vue b/server/ui-src/components/AboutMailpit.vue
index 0807709..d22950c 100644
--- a/server/ui-src/components/AboutMailpit.vue
+++ b/server/ui-src/components/AboutMailpit.vue
@@ -57,7 +57,7 @@ export default {
 <template>
 	<template v-if="!modals">
 		<div class="bg-body ms-sm-n1 me-sm-n1 py-2 text-muted small about-mailpit">
-			<button class="text-muted btn btn-sm ps-0" v-on:click="loadInfo()">
+			<button class="text-muted btn btn-sm" v-on:click="loadInfo()">
 				<i class="bi bi-info-circle-fill me-1"></i>
 				About
 			</button>
@@ -149,7 +149,7 @@ export default {
 								</div>
 							</div>
 							<div class="col-xl-6">
-								<div class="card border-secondary">
+								<div class="card border-secondary h-100">
 									<div class="card-header h4">
 										Runtime statistics
 										<button class="btn btn-sm btn-outline-secondary float-end"
diff --git a/server/ui-src/components/message/Message.vue b/server/ui-src/components/message/Message.vue
index edb7ea7..6794f0a 100644
--- a/server/ui-src/components/message/Message.vue
+++ b/server/ui-src/components/message/Message.vue
@@ -476,124 +476,120 @@ export default {
 			</div>
 		</div>
 
-		<nav>
-			<div class="nav nav-tabs my-3" id="nav-tab" role="tablist">
-				<template v-if="message.HTML">
-					<div class="btn-group">
-						<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab" data-bs-target="#nav-html"
-							type="button" role="tab" aria-controls="nav-html" aria-selected="true" ref="navhtml"
-							v-on:click="resizeIFrames()">
-							HTML
+		<nav class="nav nav-tabs my-3 d-print-none" id="nav-tab" role="tablist">
+			<template v-if="message.HTML">
+				<div class="btn-group">
+					<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab" data-bs-target="#nav-html"
+						type="button" role="tab" aria-controls="nav-html" aria-selected="true" ref="navhtml"
+						v-on:click="resizeIFrames()">
+						HTML
+					</button>
+					<button type="button" class="nav-link dropdown-toggle dropdown-toggle-split d-sm-none"
+						data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+						<span class="visually-hidden">Toggle Dropdown</span>
+					</button>
+					<div class="dropdown-menu">
+						<button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-html-source"
+							type="button" role="tab" aria-controls="nav-html-source" aria-selected="false">
+							HTML Source
 						</button>
-						<button type="button" class="nav-link dropdown-toggle dropdown-toggle-split d-sm-none"
-							data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
-							<span class="visually-hidden">Toggle Dropdown</span>
-						</button>
-						<div class="dropdown-menu">
-							<button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-html-source"
-								type="button" role="tab" aria-controls="nav-html-source" aria-selected="false">
-								HTML Source
-							</button>
-						</div>
 					</div>
-					<button class="nav-link d-none d-sm-inline" id="nav-html-source-tab" data-bs-toggle="tab"
-						data-bs-target="#nav-html-source" type="button" role="tab" aria-controls="nav-html-source"
-						aria-selected="false">
-						HTML <span class="d-sm-none">Src</span><span class="d-none d-sm-inline">Source</span>
+				</div>
+				<button class="nav-link d-none d-sm-inline" id="nav-html-source-tab" data-bs-toggle="tab"
+					data-bs-target="#nav-html-source" type="button" role="tab" aria-controls="nav-html-source"
+					aria-selected="false">
+					HTML <span class="d-sm-none">Src</span><span class="d-none d-sm-inline">Source</span>
+				</button>
+			</template>
+
+			<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab" data-bs-target="#nav-plain-text"
+				type="button" role="tab" aria-controls="nav-plain-text" aria-selected="false"
+				:class="message.HTML == '' ? 'show' : ''">
+				Text
+			</button>
+			<button class="nav-link" id="nav-headers-tab" data-bs-toggle="tab" data-bs-target="#nav-headers"
+				type="button" role="tab" aria-controls="nav-headers" aria-selected="false">
+				<span class="d-sm-none">Hdrs</span><span class="d-none d-sm-inline">Headers</span>
+			</button>
+			<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab" data-bs-target="#nav-raw" type="button"
+				role="tab" aria-controls="nav-raw" aria-selected="false">
+				Raw
+			</button>
+			<div class="dropdown d-xl-none" v-show="hasAnyChecksEnabled">
+				<button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+					Checks
+				</button>
+				<ul class="dropdown-menu checks">
+					<li v-if="mailbox.showHTMLCheck && message.HTML != ''">
+						<button class="dropdown-item" id="nav-html-check-tab" data-bs-toggle="tab"
+							data-bs-target="#nav-html-check" type="button" role="tab" aria-controls="nav-html"
+							aria-selected="false">
+							HTML Check
+							<span class="badge rounded-pill p-1 float-end" :class="htmlScoreColor"
+								v-if="htmlScore !== false">
+								<small>{{ Math.floor(htmlScore) }}%</small>
+							</span>
+						</button>
+					</li>
+					<li v-if="mailbox.showLinkCheck">
+						<button class="dropdown-item" id="nav-link-check-tab" data-bs-toggle="tab"
+							data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
+							aria-selected="false">
+							Link Check
+							<span class="badge rounded-pill bg-success float-end" v-if="linkCheckErrors === 0">
+								<small>0</small>
+							</span>
+							<span class="badge rounded-pill bg-danger float-end" v-else-if="linkCheckErrors > 0">
+								<small>{{ formatNumber(linkCheckErrors) }}</small>
+							</span>
+						</button>
+					</li>
+					<li v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
+						<button class="dropdown-item" id="nav-spam-check-tab" data-bs-toggle="tab"
+							data-bs-target="#nav-spam-check" type="button" role="tab" aria-controls="nav-html"
+							aria-selected="false">
+							Spam Analysis
+							<span class="badge rounded-pill float-end" :class="spamScoreColor"
+								v-if="spamScore !== false">
+								<small>{{ spamScore }}</small>
+							</span>
+						</button>
+					</li>
+				</ul>
+			</div>
+			<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-html-check-tab"
+				data-bs-toggle="tab" data-bs-target="#nav-html-check" type="button" role="tab" aria-controls="nav-html"
+				aria-selected="false" v-if="mailbox.showHTMLCheck && message.HTML != ''">
+				HTML Check
+				<span class="badge rounded-pill p-1" :class="htmlScoreColor" v-if="htmlScore !== false">
+					<small>{{ Math.floor(htmlScore) }}%</small>
+				</span>
+			</button>
+			<button class="d-none d-xl-inline-block nav-link" id="nav-link-check-tab" data-bs-toggle="tab"
+				data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
+				aria-selected="false" v-if="mailbox.showLinkCheck">
+				Link Check
+				<i class="bi bi-check-all text-success" v-if="linkCheckErrors === 0"></i>
+				<span class="badge rounded-pill bg-danger" v-else-if="linkCheckErrors > 0">
+					<small>{{ formatNumber(linkCheckErrors) }}</small>
+				</span>
+			</button>
+			<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-spam-check-tab"
+				data-bs-toggle="tab" data-bs-target="#nav-spam-check" type="button" role="tab" aria-controls="nav-html"
+				aria-selected="false" v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
+				Spam Analysis
+				<span class="badge rounded-pill" :class="spamScoreColor" v-if="spamScore !== false">
+					<small>{{ spamScore }}</small>
+				</span>
+			</button>
+
+			<div class="d-none d-lg-block ms-auto me-3" v-if="showMobileButtons">
+				<template v-for="_, key in responsiveSizes">
+					<button class="btn" :disabled="scaleHTMLPreview == key" :title="'Switch to ' + key + ' view'"
+						v-on:click="scaleHTMLPreview = key">
+						<i class="bi" :class="'bi-' + key"></i>
 					</button>
 				</template>
-
-				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab" data-bs-target="#nav-plain-text"
-					type="button" role="tab" aria-controls="nav-plain-text" aria-selected="false"
-					:class="message.HTML == '' ? 'show' : ''">
-					Text
-				</button>
-				<button class="nav-link" id="nav-headers-tab" data-bs-toggle="tab" data-bs-target="#nav-headers"
-					type="button" role="tab" aria-controls="nav-headers" aria-selected="false">
-					<span class="d-sm-none">Hdrs</span><span class="d-none d-sm-inline">Headers</span>
-				</button>
-				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab" data-bs-target="#nav-raw" type="button"
-					role="tab" aria-controls="nav-raw" aria-selected="false">
-					Raw
-				</button>
-				<div class="dropdown d-xl-none" v-show="hasAnyChecksEnabled">
-					<button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown"
-						aria-expanded="false">
-						Checks
-					</button>
-					<ul class="dropdown-menu checks">
-						<li v-if="mailbox.showHTMLCheck && message.HTML != ''">
-							<button class="dropdown-item" id="nav-html-check-tab" data-bs-toggle="tab"
-								data-bs-target="#nav-html-check" type="button" role="tab" aria-controls="nav-html"
-								aria-selected="false">
-								HTML Check
-								<span class="badge rounded-pill p-1 float-end" :class="htmlScoreColor"
-									v-if="htmlScore !== false">
-									<small>{{ Math.floor(htmlScore) }}%</small>
-								</span>
-							</button>
-						</li>
-						<li v-if="mailbox.showLinkCheck">
-							<button class="dropdown-item" id="nav-link-check-tab" data-bs-toggle="tab"
-								data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
-								aria-selected="false">
-								Link Check
-								<span class="badge rounded-pill bg-success float-end" v-if="linkCheckErrors === 0">
-									<small>0</small>
-								</span>
-								<span class="badge rounded-pill bg-danger float-end" v-else-if="linkCheckErrors > 0">
-									<small>{{ formatNumber(linkCheckErrors) }}</small>
-								</span>
-							</button>
-						</li>
-						<li v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
-							<button class="dropdown-item" id="nav-spam-check-tab" data-bs-toggle="tab"
-								data-bs-target="#nav-spam-check" type="button" role="tab" aria-controls="nav-html"
-								aria-selected="false">
-								Spam Analysis
-								<span class="badge rounded-pill float-end" :class="spamScoreColor"
-									v-if="spamScore !== false">
-									<small>{{ spamScore }}</small>
-								</span>
-							</button>
-						</li>
-					</ul>
-				</div>
-				<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-html-check-tab"
-					data-bs-toggle="tab" data-bs-target="#nav-html-check" type="button" role="tab"
-					aria-controls="nav-html" aria-selected="false" v-if="mailbox.showHTMLCheck && message.HTML != ''">
-					HTML Check
-					<span class="badge rounded-pill p-1" :class="htmlScoreColor" v-if="htmlScore !== false">
-						<small>{{ Math.floor(htmlScore) }}%</small>
-					</span>
-				</button>
-				<button class="d-none d-xl-inline-block nav-link" id="nav-link-check-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
-					aria-selected="false" v-if="mailbox.showLinkCheck">
-					Link Check
-					<i class="bi bi-check-all text-success" v-if="linkCheckErrors === 0"></i>
-					<span class="badge rounded-pill bg-danger" v-else-if="linkCheckErrors > 0">
-						<small>{{ formatNumber(linkCheckErrors) }}</small>
-					</span>
-				</button>
-				<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-spam-check-tab"
-					data-bs-toggle="tab" data-bs-target="#nav-spam-check" type="button" role="tab"
-					aria-controls="nav-html" aria-selected="false"
-					v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
-					Spam Analysis
-					<span class="badge rounded-pill" :class="spamScoreColor" v-if="spamScore !== false">
-						<small>{{ spamScore }}</small>
-					</span>
-				</button>
-
-				<div class="d-none d-lg-block ms-auto me-3" v-if="showMobileButtons">
-					<template v-for="_, key in responsiveSizes">
-						<button class="btn" :disabled="scaleHTMLPreview == key" :title="'Switch to ' + key + ' view'"
-							v-on:click="scaleHTMLPreview = key">
-							<i class="bi" :class="'bi-' + key"></i>
-						</button>
-					</template>
-				</div>
 			</div>
 		</nav>
 
diff --git a/server/ui-src/views/MailboxView.vue b/server/ui-src/views/MailboxView.vue
index 782c99d..e28135a 100644
--- a/server/ui-src/views/MailboxView.vue
+++ b/server/ui-src/views/MailboxView.vue
@@ -173,7 +173,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white d-print-none">
 		<div class="col-xl-2 col-md-3 col-auto pe-0">
 			<RouterLink to="/" class="navbar-brand text-white me-0" @click="reloadMailbox">
 				<img :src="resolve('/mailpit.svg')" alt="Mailpit">
diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue
index 50d9c12..5c747d6 100644
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -450,7 +450,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white d-print-none">
 		<div class="d-none d-xl-block col-xl-3 col-auto pe-0">
 			<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
 				<img :src="resolve('/mailpit.svg')" alt="Mailpit">
diff --git a/server/ui-src/views/SearchView.vue b/server/ui-src/views/SearchView.vue
index e419f8b..6d43403 100644
--- a/server/ui-src/views/SearchView.vue
+++ b/server/ui-src/views/SearchView.vue
@@ -124,7 +124,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white d-print-none">
 		<div class="col-xl-2 col-md-3 col-auto pe-0">
 			<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
 				<img :src="resolve('/mailpit.svg')" alt="Mailpit">