Fix some MailMessageView styling

dev/Styles/@Main.less

@@ -78,7 +78,6 @@
 			position: initial;
 		}
 		.messageView,
-		.messageView .b-content,
 		.messageView .b-message,
 		#messageItem,
 		#messageItem .b-text-part {

dev/Styles/User/Layout.less

@@ -97,7 +97,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
 
 #V-MailMessageView {
 	position: absolute;
-	top: 50px;
+	top: 0;
 	bottom: 13px;
 	right: 0;
 	left: 0;

dev/Styles/User/MessageView.less

@@ -5,25 +5,26 @@ html.rl-no-preview-pane {
 	}
 }
 
-#V-MailMessageView.focused .messageView {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+#V-MailMessageView .top-toolbar {
+	color: #fff;
+	padding: 10px 0;
+}
+html.rl-no-preview-pane #V-MailMessageView .top-toolbar {
+	padding-left: 1px;
+}
+html:not(.rl-mobile):not(.rl-no-preview-pane) #V-MailMessageView .top-toolbar {
+	visibility: hidden;
+}
+html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
+	display: none;
 }
 
 .messageView {
 	background-color: #fff;
 	border: 1px solid var(--border-color, #aaa);
 	border-radius: var(--border-radius, 5px);
-	height: 100%;
-
-	.toolbar {
-		position: absolute;
-		top: -50px;
-		right: 0;
-		left: 0;
-		height: 30px;
-		padding: 10px 0;
-		color: #fff;
-	}
+	height: calc(100% - 50px);
+	position: relative;
 
 	.priorityHigh .subject::before {
 		content: '! '; /*❗*/
@@ -31,10 +32,6 @@ html.rl-no-preview-pane {
 		font-weight: bolder;
 	}
 
-	.b-content {
-		height: 100%;
-	}
-
 	.b-message {
 		display: flex;
 		flex-direction: column;
@@ -141,10 +138,6 @@ html.rl-no-preview-pane {
 			opacity: 0.5;
 		}
 
-		.messageButtons {
-			margin-top: 5px;
-		}
-
 		.informationShort {
 			margin: 0 56px 0 0;
 			overflow: hidden;
@@ -240,6 +233,11 @@ html.rl-no-preview-pane {
 	}
 }
 
+#V-MailMessageView.focused .messageView {
+	border-color: #9d9d9d;
+	box-shadow: var(--smMainShadow);
+}
+
 #messageItem {
 
 	color: #000;
@@ -443,31 +441,12 @@ html.rl-no-preview-pane {
 }
 
 html.rl-no-preview-pane .messageView {
-
-	.toolbar {
-		padding-left: 1px;
-	}
-
-	.b-content {
-		top: 50px;
-		left: 0;
-		bottom: @rlBottomMargin;
-		right: @rlBottomMargin;
 	border: 1px solid var(--border-color, #aaa);
 	box-shadow: var(--smMainShadow);
 }
-}
-
-html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView {
-	.top-toolbar {
-		display: none;
-	}
-}
 
 html.rl-bottom-preview-pane .messageView {
-	.b-content {
-		bottom: @rlBottomMargin;
-	}
+	height: 100%;
 }
 
 html.rl-fullscreen {
@@ -476,20 +455,11 @@ html.rl-fullscreen {
 	#V-MailMessageList,
 	#V-SettingsPane,
 	#V-SystemDropDown,
-	#V-MailMessageView .messageView .toolbar {
+	#V-MailMessageView .top-toolbar {
 		display: none !important;
 	}
 
 	.messageView {
 		border: 0;
 	}
-
-	.messageView .b-content {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border: 0;
-	}
 }

dev/Styles/_Values.less

@@ -1,14 +1,12 @@
 
 @rlLeftWidth: 200px;
 @rlLowMargin: 8px;
-@rlBottomMargin: 5px;
 
 :root {
-	--rlLeftWidth: 200px;
 	--smDialogShrink: 20px;
 	--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 .rl-mobile {
 	/* For Firefox */
-	--smDialogShrink: 50px;
+	--smDialogShrink: 25px;
 }

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -1,6 +1,4 @@
-<div class="messageView">
-	<div class="toolbar top-toolbar g-ui-user-select-none">
-		<div class="messageButtons btn-toolbar">
+<div class="top-toolbar g-ui-user-select-none btn-toolbar">
 	<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
 		<a class="btn buttonClose fontastic" data-bind="click: closeMessage">✖</a>
 	</div>
@@ -20,8 +18,7 @@
 		<a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a>
 	</div>
 </div>
-	</div>
-	<div class="b-content">
+<div class="b-content messageView">
 	<div class="b-message-view-backdrop" data-bind="visible: moveAction">
 		<div class="backdrop-message" data-icon="📁" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></div>
 	</div>
@@ -302,4 +299,3 @@
 	</div>
 	<!-- /ko -->
 </div>
-</div>