#rl-content to use flex for better layout control

dev/Styles/User/FolderList.less

@@ -6,7 +6,7 @@
 
 	> * {
 		position: absolute;
-		right: 0;
+		right: 2px;
 		left: 0;
 	}
 
@@ -237,9 +237,6 @@ html.rl-left-panel-disabled {
 		margin-top: 10px !important;
 		margin-left: 0 !important;
 	}
-	&.rl-mobile #rl-left {
-		visibility: hidden;
-	}
 }
 
 html.rl-mobile .b-folders .b-content {

dev/Styles/User/Layout.less

@@ -5,22 +5,25 @@
 	background-position: center;
 }
 
-#rl-left, #rl-right {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 10px;
-	left: 0;
+#rl-content {
+	display:flex;
+	height: 100%;
 }
 
 #rl-left {
-	z-index: 0;
+	flex-grow: 0;
+	flex-shrink: 0;
+	position: relative;
+/*	transition: width 0.3s ease-out;*/
 	width: @rlLeftWidth;
+	z-index: 0;
 }
 
 #rl-right {
+	flex-grow: 1;
+	max-width: 100vw;
+	position: relative;
 	z-index: 1;
-	left: @rlLeftWidth;
 }
 
 /*
@@ -54,8 +57,7 @@
 }
 
 html:not(.rl-left-panel-disabled) #rl-left {
-	resize: horizontal;
-	overflow: hidden;
+	resize: horizontal; overflow: auto;
 	min-width: 155px;
 	max-width: 350px;
 }
@@ -70,12 +72,12 @@ html:not(.rl-left-panel-disabled) #rl-left {
 }
 
 .rl-side-preview-pane #V-MailMessageList {
-	resize: horizontal;
+	resize: horizontal; overflow: auto;
 	min-width: 320px;
 	max-width: 60%;
 }
 .rl-bottom-preview-pane #V-MailMessageList {
-	resize: vertical;
+	resize: vertical; overflow: auto;
 	min-height: 200px;
 	max-height: 60%;
 }
@@ -205,10 +207,6 @@ html.rl-side-preview-pane {
 		width: @rlLeftWidth + 20;
 	}
 
-	#rl-right {
-		left: @rlLeftWidth + 20;
-	}
-
 	#V-MailMessageList {
 		width: 40%;
 	}
@@ -226,10 +224,6 @@ html.rl-side-preview-pane {
 		width: 155px;
 	}
 
-	#rl-right {
-		left: 155px;
-	}
-
 	#rl-settings-subscreen {
 		padding: 10px;
 	}
@@ -262,16 +256,15 @@ html.rl-left-panel-disabled {
 			display: none;
 		}
 	}
-
-	#rl-right {
-		left: 60px;
-	}
 }
 
 html.rl-no-preview-pane {
 
 	#V-MailMessageList {
-		width: inherit;
+		position: absolute;
+		left: 0;
+		right: 0;
+		width: auto;
 	}
 
 }
@@ -281,18 +274,27 @@ html.rl-no-preview-pane #rl-right .resizer {
 	display: none !important;
 }
 
+html.rl-mobile {
+	&.rl-left-panel-disabled #rl-left {
+		display: none;
+	}
+	#rl-right {
+		min-width: 100vw;
+	}
+}
+
 html.rl-bottom-preview-pane {
 
 	#V-MailMessageList {
-		bottom: inherit;
-		width: inherit;
 		height: 300px;
+		position: absolute;
+		left: 0;
 		right: 0;
+		width: auto;
 	}
 
 	#V-MailMessageView {
-		left: 0;
-		top: 356px;
+		top: 300px;
 	}
 }
 
@@ -321,14 +323,3 @@ html:not(.rl-mobile) .show-mobile {
 		}
 	}
 }
-
-html.rl-mobile {
-
-	&:not(.rl-left-panel-disabled) #rl-right {
-		right: -150px;
-	}
-
-	&.rl-left-panel-disabled #rl-right {
-		left: 0;
-	}
-}

dev/Styles/User/MessageView.less

@@ -476,20 +476,11 @@ html.rl-fullscreen {
 		display: none !important;
 	}
 
-	#rl-right {
-		left: 0 !important;
-
-		#V-MailMessageList,
-		#V-SettingsPane,
-		#V-SystemDropDown,
-		#V-MailMessageView .messageView .toolbar {
-			display: none !important;
-		}
-	}
-
+	#V-MailMessageList,
+	#V-SettingsPane,
 	#V-SystemDropDown,
-	.messageView .top-toolbar {
-		display: none;
+	#V-MailMessageView .messageView .toolbar {
+		display: none !important;
 	}
 
 	.messageView {