#rl-content to use flex for better layout control

dev/App/User.js

@@ -256,11 +256,10 @@ export class AppUser extends AbstractApp {
 						// initLeftSideLayoutResizer
 						setTimeout(() => {
 							const left = elementById('rl-left'),
-								right = elementById('rl-right'),
 								fToggle = () =>
-									setLayoutResizer(left, right, ClientSideKeyNameFolderListSize,
+									setLayoutResizer(left, null, ClientSideKeyNameFolderListSize,
 										(ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width');
-							if (left && right) {
+							if (left) {
 								fToggle();
 								leftPanelDisabled.subscribe(fToggle);
 							}

dev/Common/UtilsUser.js

@@ -199,7 +199,7 @@ showMessageComposer = (params = []) =>
 setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
 {
 	if (source.layoutResizer && source.layoutResizer.mode != mode) {
-		target.removeAttribute('style');
+		target?.removeAttribute('style');
 		source.removeAttribute('style');
 	}
 	source.observer?.disconnect();
@@ -210,10 +210,10 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
 				let value;
 				if ('Width' == mode) {
 					value = source.offsetWidth;
-					target.style.left = value + 'px';
+					target && (target.style.left = value + 'px');
 				} else {
 					value = source.offsetHeight;
-					target.style.top = (4 + source.offsetTop + value) + 'px';
+					target && (target.style.top = value + 'px');
 				}
 				return value;
 			};

dev/Styles/Admin/Layout.less

@@ -7,7 +7,6 @@
 #rl-left {
 	flex-grow: 0;
 	flex-shrink: 0;
-	overflow: auto;
 	padding-top: 50px + @rlLowMargin + 10px;
 	transition: width 0.3s ease-out;
 	width: @rlLeftWidth;

dev/Styles/Main.less

@@ -106,7 +106,7 @@ dialog .modal-body {
 
 // Footer (for actions)
 dialog > footer {
-	padding: 14px 15px 15px;
+	padding: 9px 15px;
 	margin-bottom: 0;
 	text-align: right; // right align buttons
 	border-top: 1px solid var(--border-color, #ddd);

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 {
+#rl-content {
-	position: fixed;
+	display:flex;
-	top: 0;
+	height: 100%;
-	right: 0;
-	bottom: 10px;
-	left: 0;
 }
 
 #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;
+	resize: horizontal; overflow: auto;
-	overflow: hidden;
 	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: 300px;
-		top: 356px;
 	}
 }
 
@@ -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 {
+	#V-MailMessageList,
-		left: 0 !important;
+	#V-SettingsPane,
-
-		#V-MailMessageList,
-		#V-SettingsPane,
-		#V-SystemDropDown,
-		#V-MailMessageView .messageView .toolbar {
-			display: none !important;
-		}
-	}
-
 	#V-SystemDropDown,
-	.messageView .top-toolbar {
+	#V-MailMessageView .messageView .toolbar {
-		display: none;
+		display: none !important;
 	}
 
 	.messageView {

integrations/nextcloud/snappymail/css/embed.css

@@ -9,11 +9,6 @@ This stylesheet is used when SnappyMail runs in embed mode.
 	min-height: 100%;
 }
 
-#content #rl-app:not([data-admin="1"]) #rl-left,
-#content #rl-app:not([data-admin="1"]) #rl-right {
-	position: absolute;
-}
-
 .squire-wysiwyg {
 	min-width: 100%;
 	min-height: 100%;