From b1bcbc1671ce99d83d9ac5abb9b03ba8229adc5c Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Mon, 24 Oct 2022 15:12:25 +0200
Subject: [PATCH] Resolve #579

---
 dev/Styles/User/MessageList.less              | 85 ++++++++-----------
 dev/View/User/MailBox/MessageList.js          |  2 +-
 .../templates/Views/User/MailMessageList.html | 28 +++---
 3 files changed, 50 insertions(+), 65 deletions(-)

diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less
index b214ae457..63e4c3e87 100644
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@@ -27,9 +27,10 @@ html.rl-no-preview-pane {
 	border: 1px solid @rlMainDarkColor;
 	border-radius: @rlMainBorderRadius;
 	box-shadow: @rlMainShadow;
+/*
 	display: flex;
 	flex-direction: column;
-
+*/
 	.b-footer {
 	    display: flex;
 		flex-shrink: 0;
@@ -177,28 +178,27 @@ html:not(rl-mobile) {
 			visibility: hidden;
 		}
 
-		.checkboxMessage {
+		.messageCheckbox {
 			display: none;
 		}
 	}
 }
 
-.messageListItem {
+.messageListItem > div + div {
 	display: flex;
-	flex-wrap: wrap;
-
-	position: relative;
-	font-size: 13px;
 	overflow: hidden;
-	cursor: pointer;
+	padding: 5px 0 5px 5px;
+	width: 100%;
+}
 
-	margin: 0;
-	padding: 5px 0;
+.messageListItem {
+	cursor: pointer;
 	border: 0;
 	border-bottom: 1px solid rgba(153, 153, 153, 0.2);
 	border-left: 6px solid #eee;
-
-	z-index: 100;
+	display: flex;
+	font-size: 13px;
+	line-height: 2;
 /*
 	> * {
 		display: flex;
@@ -221,9 +221,12 @@ html:not(rl-mobile) {
 		opacity: .3;
 	}
 
-	.checkboxMessage {
-		margin: 0 6px;
+	.messageCheckbox {
 		font-size: 16px;
+		padding: 5px .5em 0;
+	}
+	.checkboxMessage {
+		display: inline;
 	}
 
 	time, .sizeParent {
@@ -234,7 +237,6 @@ html:not(rl-mobile) {
 	}
 
 	.attachmentParent {
-		position: relative;
 		margin: 2px 10px 0 5px;
 	}
 
@@ -245,6 +247,14 @@ html:not(rl-mobile) {
 		white-space: nowrap;
 	}
 
+	.senderParent {
+		flex: 0 0 25%;
+	}
+
+	.subjectParent {
+		flex: 1 1 auto;
+	}
+
 	.subjectParent:empty {
 		font-style: italic;
 		opacity: 0.5;
@@ -394,11 +404,19 @@ html:not(rl-mobile) {
 
 .rl-side-preview-pane, .rl-mobile {
 
-	.messageListItem {
+	.messageListItem > div + div {
+		flex-wrap: wrap;
+	}
 
-		.checkboxMessage {
-			line-height: 12px;
-			margin: 10px 6px -5px;
+	.messageListItem {
+		line-height: 1.5;
+
+		.messageCheckbox {
+			padding-top: 0.8em;
+		}
+
+		.senderParent {
+			flex: 1 0 45%;
 		}
 
 		.subjectParent {
@@ -408,10 +426,6 @@ html:not(rl-mobile) {
 			width: calc(100% - 120px);
 		}
 
-		.senderParent {
-			flex: 1 0 45%;
-		}
-
 		.flagParent {
 			order: 1;
 		}
@@ -424,29 +438,4 @@ html:not(rl-mobile) {
 			order: 3;
 		}
 	}
-
-	.messageList:not(.hideMessageListCheckbox) .subjectParent {
-		margin-left: 28px;
-	}
-}
-
-html:not(.rl-mobile):not(.rl-side-preview-pane) {
-
-	.messageListItem {
-
-		line-height: 25px;
-		flex-wrap: nowrap;
-
-		> * {
-			line-height: 25px;
-		}
-
-		.senderParent {
-			flex: 0 0 25%;
-		}
-
-		.subjectParent {
-			flex: 1 1 auto;
-		}
-	}
 }
diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js
index d0b1b416c..a53e86d0f 100644
--- a/dev/View/User/MailBox/MessageList.js
+++ b/dev/View/User/MailBox/MessageList.js
@@ -153,7 +153,7 @@ export class MailMessageList extends AbstractViewRight {
 			MessagelistUserStore.selectedMessage,
 			MessagelistUserStore.focusedMessage,
 			'.messageListItem .actionHandle',
-			'.messageListItem .checkboxMessage',
+			'.messageListItem .messageCheckbox',
 			'.messageListItem.focused'
 		);
 
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
index 887075f29..aba0596eb 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
@@ -109,23 +109,19 @@
 		</div>
 		<div class="messageListPlace" data-bind="dragmessages: 1, foreach: messageList" draggable="true">
 			<div class="messageListItem" data-bind="css: lineAsCss()">
-				<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
-
-				<div class="flagParent fontastic"></div>
-
-				<div class="senderParent actionHandle" data-bind="attr: {'title': senderClearEmailsString}, text: senderEmailsString"></div>
-
-				<div class="subjectParent actionHandle" data-bind="text: subject"></div>
-
-				<div class="attachmentParent actionHandle">
-					<i data-bind="css: attachmentIconClass"></i>
+				<div class="messageCheckbox">
+					<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
+				</div><div>
+					<div class="flagParent fontastic"></div>
+					<div class="senderParent actionHandle" data-bind="attr: {'title': senderClearEmailsString}, text: senderEmailsString"></div>
+					<div class="subjectParent actionHandle" data-bind="text: subject"></div>
+					<div class="attachmentParent actionHandle">
+						<i data-bind="css: attachmentIconClass"></i>
+					</div>
+					<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
+					<div class="threads-len" data-bind="visible: 1 < threadsLen(), text: threadsLen"></div>
+					<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
 				</div>
-
-				<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
-
-				<div class="threads-len" data-bind="visible: 1 < threadsLen(), text: threadsLen"></div>
-
-				<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
 			</div>
 		</div>
 		<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>