Hopefull improved styling for Firefox mobile fixes

dev/Styles/@Admin.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/alerts.less";
 
 @import "_FontasticToBoot.less";
-@import "_BootstrapFix.less";
 
 @import "Ui.less";
 @import "Main.less";

dev/Styles/@Boot.css

@@ -57,6 +57,7 @@ html, body {
 }
 body#rl-app {
 	height: 100vh;
+	height: 100dvh;
 	overflow: hidden;
 	width: 100vw;
 }

dev/Styles/@Main.less

@@ -17,7 +17,6 @@
 @import "../../vendors/bootstrap/less/utilities.less";
 
 @import "_FontasticToBoot.less";
-@import "_BootstrapFix.less";
 
 @import "Ui.less";
 @import "Main.less";

dev/Styles/Admin/Layout.less

@@ -1,9 +1,4 @@
 
-#rl-content {
-	display:flex;
-	height: 100%;
-}
-
 #rl-left {
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -70,7 +65,7 @@
 	background-color: var(--settings-bg-clr, #fff);
 	border: 1px solid var(--border-color, #aaa);
 	border-radius: var(--border-radius, 5px);
-	box-shadow: @rlMainShadow;
+	box-shadow: var(--smMainShadow);
 	height: calc(100% - @rlLowMargin - @rlLowMargin);
 	margin: 0 @rlLowMargin @rlLowMargin 0;
 	overflow-y: auto;
@@ -96,7 +91,6 @@
 @media screen and (max-width: 999px) {
 	#rl-settings-subscreen {
 		padding: 10px;
-		margin-right: 0;
 	}
 
 	#rl-right {

dev/Styles/Main.less

@@ -1,7 +1,3 @@
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
 
 html.list-loading body {
 /*	cursor: wait;*/
@@ -26,6 +22,10 @@ option:disabled {
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
+#rl-content {
+	display:flex;
+	height: 100%;
+}
 
 dialog::backdrop {
 	background: rgba(0,0,0,0.5);
@@ -49,7 +49,8 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	margin: 10px auto;
-	max-height: calc(100vh - 20px);
+	max-height: calc(100vh - var(--smDialogShrink));
+	max-height: calc(100dvh - var(--smDialogShrink));
 	max-width: 560px;
 	overflow: auto;
 	padding: 0;
@@ -77,6 +78,7 @@ dialog:not(.animate) {
 .rl-mobile dialog {
 	margin: 0 auto;
 /*	max-height: calc(100vh - 86px);*/
+/*	max-height: 100dvh;*/
 	width: 100%;
 }
 

dev/Styles/Ui.less

@@ -142,3 +142,47 @@ tr:hover .drag-handle {
 .tabs > [id^="tab"]:checked + label + .tab-content {
 	visibility: visible;
 }
+
+// OTHER
+
+.legend {
+	border-bottom: 1px solid var(--border-color, #ddd);
+	font-size: 150%;
+	line-height: 2.1;
+	margin-bottom: 1.43em;
+}
+summary.legend {
+	cursor: pointer;
+}
+
+.btn.btn-thin {
+	padding: 0 9px;
+}
+
+.alert a:not(.close) {
+	text-decoration: underline;
+}
+
+.alert.alert-info a:not(.close) {
+	color: var(--info-clr, #3a87ad);
+}
+
+.alert.alert-error a:not(.close) {
+	color: var(--error-clr, #b94a48);
+}
+
+/* mobile and tablet */
+@media screen and (max-width: 999px) {
+	.form-horizontal {
+		.control-group {
+			> label {
+				text-align: left;
+			}
+
+			// Move over all input controls and content
+			> *:not(label) {
+				margin-left: 20px;
+			}
+		}
+	}
+}

dev/Styles/User/Compose.less

@@ -7,7 +7,8 @@
 }
 
 #V-PopupsCompose {
-	height: calc(100vh - 52px);
+	height: 100vh;
+	height: 100dvh;
 	max-width: 1000px;
 	width: 99%;
 

dev/Styles/User/Contacts.less

@@ -1,6 +1,7 @@
 
 #V-PopupsContacts {
-
+	height: 100vh;
+	height: 100dvh;
 	max-width: 900px;
 	min-height: 300px;
 
@@ -13,7 +14,7 @@
 
 	.modal-body {
 		display: flex;
-		height: calc(100vh - 49px);
+		height: 100%;
 		padding: 0;
 	}
 

dev/Styles/User/FolderList.less

@@ -2,21 +2,24 @@
 @folderItemPadding: 7px;
 @subPadding: 15px;
 
-.b-folders {
+#V-MailFolderList,
-
+#V-MailFolderList .b-content {
-	> * {
+	height: 100%;
-		position: absolute;
-		right: 2px;
-		left: 0;
 }
 
+.b-folders {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	padding-right: 2px;
+
 	ul {
 		margin: 0;
 	}
 
 	input {
-		width: calc(100% - 8px);
 		margin-left: 4px;
+		width: calc(100% - 8px);
 	}
 
 	.move-action-content-wrapper {
@@ -35,24 +38,17 @@
 	}
 
 	.b-toolbar {
-		top: 0;
+		padding: 10px 0 10px @rlLowMargin;
-		padding: 10px 0 0 @rlLowMargin;
 		color: #fff;
-		z-index: 101;
 	}
 
 	.b-footer {
-		bottom: 10px;
+		padding: 10px @rlLowMargin;
-		padding: 0 10px 0 5px;
-		z-index: 101;
-
 		overflow: hidden;
 		white-space: nowrap;
 	}
 
 	.b-content {
-		bottom: 32px + @rlLowMargin + @rlBottomMargin;
-		top: 50px + @rlLowMargin;
 		overflow: hidden;
 		overflow-y: auto;
 		min-width: 100px;

dev/Styles/User/Layout.less

@@ -5,11 +5,6 @@
 	background-position: center;
 }
 
-#rl-content {
-	display:flex;
-	height: 100%;
-}
-
 #rl-left {
 	flex-grow: 0;
 	flex-shrink: 0;

dev/Styles/User/MessageList.less

@@ -7,7 +7,7 @@ html.rl-mobile, html.rl-no-preview-pane {
 
 #V-MailMessageList.focused .messageList {
 	border-color: #9d9d9d;
-	box-shadow: @rlMainShadow;
+	box-shadow: var(--smMainShadow);
 }
 
 #sort-list-dropdown-id {

dev/Styles/User/MessageView.less

@@ -454,7 +454,7 @@ html.rl-no-preview-pane .messageView {
 		bottom: @rlBottomMargin;
 		right: @rlBottomMargin;
 		border: 1px solid var(--border-color, #aaa);
-		box-shadow: @rlMainShadow;
+		box-shadow: var(--smMainShadow);
 	}
 }
 

dev/Styles/User/Settings.less

@@ -70,7 +70,7 @@
 	background-color: var(--settings-bg-clr, #fff);
 	border: 1px solid var(--border-color, #aaa);
 	border-radius: var(--border-radius, 5px);
-	box-shadow: @rlMainShadow;
+	box-shadow: var(--smMainShadow);
 	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
 	margin: 50px @rlLowMargin @rlLowMargin 0;
 	overflow-y: auto;

dev/Styles/_BootstrapFix.less

@@ -1,42 +0,0 @@
-
-.legend {
-	border-bottom: 1px solid var(--border-color, #ddd);
-	font-size: 150%;
-	line-height: 2.1;
-	margin-bottom: 1.43em;
-}
-summary.legend {
-	cursor: pointer;
-}
-
-.btn.btn-thin {
-	padding: 0 9px;
-}
-
-.alert a:not(.close) {
-	text-decoration: underline;
-}
-
-.alert.alert-info a:not(.close) {
-	color: var(--info-clr, #3a87ad);
-}
-
-.alert.alert-error a:not(.close) {
-	color: var(--error-clr, #b94a48);
-}
-
-/* mobile and tablet */
-@media screen and (max-width: 999px) {
-	.form-horizontal {
-		.control-group {
-			> label {
-				text-align: left;
-			}
-
-			// Move over all input controls and content
-			> *:not(label) {
-				margin-left: 20px;
-			}
-		}
-	}
-}

dev/Styles/_Values.less

@@ -1,7 +1,14 @@
 
 @rlLeftWidth: 200px;
-
-@rlMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-
 @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;
+}

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

@@ -27,7 +27,6 @@
 		<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
 		<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
 	</div>
-	<div class="b-content show-on-panel-disabled" data-bind="click: toggleLeftPanel"></div>
 	<div class="b-footer btn-toolbar">
 		<div class="btn-group">
 			<a class="btn fontastic" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'"></a>

snappymail/v/0.0.0/themes/example.css

@@ -100,4 +100,9 @@
 	--tab-active-bg-clr: #fff;
 	--tab-hover-border-clr: #eee;
 
+	--smDialogShrink: 20px;
+	--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+.rl-mobile {
+	--smDialogShrink: 50px;
 }