Changed everything to be box-sizing: border-box;

dev/Styles/@Boot.css

@@ -35,15 +35,29 @@
 	--fontSerif: "URW Palladio L", Georgia, Times, serif;
 }
 
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
 html, body {
 	margin: 0;
 	padding: 0;
+	-webkit-text-size-adjust: 100%; /* 2 */
 }
 
 #rl-app {
 	background-color: var(--main-bg-color, #aaa);
 	color: var(--main-color, #333);
 	font-family: var(--fontSans);
+
+	-webkit-touch-callout: none;
+	font-size: var(--main-font-size, 14px);
+	line-height: 1.25; /* 1 */
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 }
 
 #rl-loading, #rl-loading-error {

dev/Styles/@Main.less

@@ -57,11 +57,7 @@
 @import "_End.less";
 
 @media print {
-	body, html {
+	#rl-app, #rl-right {
-		height: auto;
-		overflow: auto;
-	}
-	body, #rl-right {
 		position: initial;
 	}
 	#rl-left {

dev/Styles/Admin/Domains.less

@@ -7,12 +7,10 @@
 	.domain-name {
 		display: inline-block;
 		word-break: break-all;
-		box-sizing: border-box;
 	}
 
 	.domain-alias {
 		display: inline-block;
-		box-sizing: border-box;
 		color: #bbb;
 		padding-left: 5px;
 	}

dev/Styles/Admin/Layout.less

@@ -45,17 +45,15 @@
 	height: 100%;
 
 	> .b-toolbar {
+		color: #fff;
+		display: flex;
 		position: absolute;
 		top: 0;
 		right: 0;
 		left: 0;
-		height: 34px;
 		padding: 8px @rlLowMargin 8px 0;
-		color: #fff;
 		text-shadow: 0 1px 1px #000;
 
-		display: flex;
-
 		h4 {
 			flex-grow: 1;
 			margin: 8px;
@@ -73,7 +71,6 @@
 	border: 1px solid var(--border-color, #aaa);
 	border-radius: var(--border-radius, 5px);
 	box-shadow: @rlMainShadow;
-	box-sizing: border-box;
 	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
 	margin: (50px + @rlLowMargin) @rlLowMargin @rlLowMargin 0;
 	overflow-y: auto;

dev/Styles/Admin/Plugin.less

@@ -2,17 +2,6 @@
 
 	max-width: 660px;
 
-	.information {
-		display: inline-block;
-		background-color: #ddd;
-		border-radius: 10px;
-		cursor: pointer;
-		height: 25px;
-		width: 30px;
-		text-align: center;
-		padding-top: 5px;
-	}
-
 	textarea {
 		width: 400px;
 		height: 70px;

dev/Styles/Components.less

@@ -80,7 +80,6 @@
 
 	> div > div {
 		position: absolute;
-		box-sizing: border-box;
 		margin-top: 1px;
 
 		animation: checkmark-to-box 200ms ease-out forwards;

dev/Styles/Languages.less

@@ -6,7 +6,7 @@
 		display: inline-block;
 		padding: 5px 15px;
 		margin: 2px 5px;
-		width: 180px;
+		width: 216px;
 		background-color: rgba(128, 128, 128, 0.1);
 		border: 1px solid transparent;
 		border-radius: var(--input-border-radius, 3px);
@@ -34,8 +34,8 @@
 	}
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 733px) {
 	#V-PopupsLanguages label {
-		width: calc(100% - 40px);
+		width: 100%;
 	}
 }

dev/Styles/Main.less

@@ -3,23 +3,6 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
-html, body {
-	height: 100%;
-	overflow: hidden;
-	-webkit-text-size-adjust: 100%; /* 2 */
-}
-
-#rl-app {
-	-webkit-touch-callout: none;
-	font-size: var(--main-font-size, 14px);
-	line-height: 1.25; /* 1 */
-	position: fixed;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-}
-
 html.list-loading body {
 /*	cursor: wait;*/
 	cursor: progress;
@@ -62,7 +45,6 @@ dialog {
 	border: 1px solid var(--dialog-border-clr, rgba(0,0,0,.3));
 	border-radius: var(--dialog-border-radius, 6px);
 	box-shadow: 0 5px 80px rgba(0,0,0,0.3);
-	box-sizing: border-box;
 	color: var(--dialog-clr, #333);
 	display: flex;
 	flex-direction: column;

dev/Styles/Ui.less

@@ -20,7 +20,6 @@
 .settings-save-trigger {
 
 	display: inline-block;
-	height: 1em;
 	line-height: 1em;
 	margin-left: 0.5em !important;
 

dev/Styles/User/Attachments.less

@@ -83,7 +83,6 @@
 	}
 
 	.iconMain, .iconPreview {
-		box-sizing: border-box;
 		padding: 6px 0 0;
 		font-size: 36px;
 		color: #aaa;

dev/Styles/User/Compose.less

@@ -19,7 +19,6 @@
 	}
 
 	.textAreaParent, .attachmentAreaParent {
-		box-sizing: border-box;
 		height: 100%;
 		min-height: 200px;
 		position: relative;

dev/Styles/User/EmailAddresses.less

@@ -3,7 +3,6 @@
 	border: 1px solid var(--input-border-clr, #ccc);
 	border-radius: var(--input-border-radius, 3px);
 	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-	box-sizing: border-box;
 	color: var(--input-clr, #555);
 	cursor: text;
 	font-size: 90%;

dev/Styles/User/FolderList.less

@@ -31,7 +31,6 @@
 
 	.b-toolbar {
 		top: 0;
-		height: 30px;
 		padding: 10px 0 0 @rlLowMargin;
 		color: #fff;
 		z-index: 101;
@@ -39,7 +38,6 @@
 
 	.b-footer {
 		bottom: 10px;
-		height: 30px;
 		padding: 0 10px 0 5px;
 		z-index: 101;
 
@@ -69,7 +67,6 @@
 			display: block;
 			position: relative;
 			z-index: 1;
-			height: 34px;
 			line-height: 34px;
 			background-color: transparent;
 			vertical-align: middle;
@@ -222,8 +219,7 @@
 		max-width: -webkit-fit-content;
 		max-width: fit-content;
 		overflow: hidden;
-		height: 19px;
+		max-height: 2em;
-		padding: 4px 8px;
 	}
 }
 

dev/Styles/User/MessageList.less

@@ -17,7 +17,6 @@ html.rl-no-preview-pane {
 }
 
 #V-MailMessageList .btn-toolbar {
-	height: 30px;
 	padding: 10px 1px;
 	white-space: nowrap;
 }

dev/Styles/User/MessageView.less

@@ -44,9 +44,8 @@ html.rl-no-preview-pane {
 	.b-message-view-checked-helper {
 		text-align: center;
 		font-size: 70px;
-		line-height: 70px;
+		padding-top: 25vh;
-		padding-top: 100px;
+		opacity: 0.6;
-		color: #999;
 	}
 	.b-message-view-checked-helper::after {
 		content: ' ✉';
@@ -58,7 +57,7 @@ html.rl-no-preview-pane {
 		font-size: 24px;
 		line-height: 30px;
 		color: #999;
-		padding: 120px 10px 0 10px;
+		padding: 25vh 10px 0;
 	}
 
 	.b-message-view-desc.error {

dev/Styles/User/Settings.less

@@ -27,11 +27,13 @@
 			cursor: pointer;
 			display: block;
 			font-size: 18px;
-			height: 30px;
+			line-height: 2em;
-			line-height: 29px;
+			max-height: 2em;
 			overflow: hidden;
-			padding: 4px 10px;
+			padding: 0 10px;
 			text-decoration: none;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 
 		a:focus, a:hover {
@@ -54,7 +56,6 @@
 		top: 0;
 		right: 0;
 		left: 0;
-		height: 34px;
 		padding: 8px 0;
 		color: #fff;
 	}
@@ -71,7 +72,6 @@
 	scroll-behavior: smooth;
 	padding:20px;
 
-	box-sizing: border-box;
 	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
 
 	background-color: var(--settings-bg-clr, #fff);

dev/Styles/User/SquireUI.less

@@ -37,7 +37,6 @@
 */
 
 .squire-wysiwyg, .squire-plain {
-	box-sizing: border-box;
 	font-size: 13px;
 	height: 100%;
 	line-height: 16px;

dev/Styles/User/SystemDropDown.less

@@ -15,7 +15,6 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	height: 30px;
 	padding: 10px @rlLowMargin;
 	z-index: 103;
 
@@ -33,7 +32,7 @@
 		cursor: pointer;
 		display: inline-block;
 		font-size: 30px;
-		height: 30px;
+		height: 1em;
 		margin-right: 10px;
 		width: 1em;
 
@@ -61,8 +60,7 @@
 		display: inline-block;
 		font-weight: bold;
 		font-size: 16px;
-		height: 29px;
+		line-height: 29px;
-		line-height: 30px;
 		max-width: 25vw;
 		overflow: hidden;
 		padding: 1px 8px;

dev/Styles/_FontasticToBoot.less

@@ -8,7 +8,7 @@
 [class^="icon-"],
 [class*=" icon-"] {
 	display: inline-block;
-	width: 1em;
+	min-width: 1em;
 
 	.disabled &,
 	.btn[disabled] & {
@@ -35,8 +35,8 @@
 
 .icon-spinner {
 
-	height: 0.75em;
+	height: 1.2em;
-	width: 0.75em;
+	width: 1.2em;
 
 	margin: 0 -1px;
 

integrations/nextcloud/snappymail/css/embed.css

@@ -10,32 +10,6 @@ This stylesheet is used when SnappyMail runs in embed mode.
 	min-height: 100%;
 }
 
-#content[class*="app-"] #rl-app * {
-	box-sizing: content-box;
-}
-#content[class*="app-"] #rl-app #V-Settings-Domains .domain-name,
-#content[class*="app-"] #rl-app #V-Settings-Domains .domain-alias
-#content[class*="app-"] #rl-app #rl-settings-subscreen,
-#content[class*="app-"] #rl-app .e-checkbox.material-design > div > div,
-#content[class*="app-"] #rl-app .attachmentItem .iconMain,
-#content[class*="app-"] #rl-app .attachmentItem .iconPreview,
-#content[class*="app-"] #rl-app #V-PopupsCompose .textAreaParent,
-#content[class*="app-"] #rl-app #V-PopupsCompose .attachmentAreaParent,
-#content[class*="app-"] #rl-app .emailaddresses,
-#content[class*="app-"] #rl-app .squire-wysiwyg,
-#content[class*="app-"] #rl-app .squire-plain,
-/* bootstrap */
-#content[class*="app-"] #rl-app .btn-block,
-#content[class*="app-"] #rl-app select,
-#content[class*="app-"] #rl-app .select,
-#content[class*="app-"] #rl-app textarea,
-#content[class*="app-"] #rl-app input,
-#content[class*="app-"] #rl-app .input-block-level,
-#content[class*="app-"] #rl-app .icon-spinner,
-#content[class*="app-"] #rl-app #V-AdminPane #rl-settings-subscreen
-{
-	box-sizing: border-box;
-}
 .squire-wysiwyg {
 	min-width: 100%;
 	min-height: 100%;
@@ -78,7 +52,6 @@ This stylesheet is used when SnappyMail runs in embed mode.
 }
 
 #rl-app .squire-plain, #rl-app .squire-wysiwyg {
-	box-sizing: border-box;
 	font-size: 13px;
 	height: 100%;
 	line-height: 16px;

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

@@ -3,7 +3,5 @@
 </nav>
 <div class="b-content show-on-panel-disabled" data-bind="click: leftPanelDisabled.toggle()"></div>
 <div class="b-footer">
-	<a class="btn" data-bind="click: leftPanelDisabled.toggle()">
+	<a class="btn" data-bind="click: leftPanelDisabled.toggle, css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></a>
-		<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
-	</a>
 </div>

vendors/bootstrap/less/buttons.less

@@ -11,8 +11,8 @@
   border-radius: 3px;
 
   display: inline-block;
-  padding: 4px 12px;
+  padding: 0 12px;
-  line-height: 1.43em;
+  line-height: 2em;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -74,10 +74,8 @@
 // Block button
 .btn-block {
   display: block;
-  width: 100%;
   padding-left: 0;
   padding-right: 0;
-  box-sizing: border-box;
 }
 
 

vendors/bootstrap/less/forms.less

@@ -41,7 +41,6 @@ select,
 .select,
 textarea,
 input {
-  box-sizing: border-box;
   display: inline-block;
   padding: 4px 6px;
   color: var(--input-clr, #555);

vendors/bootstrap/less/mixins.less

@@ -24,7 +24,6 @@
   display: block;
   width: 100%;
   min-height: 30px;        // Make inputs at least the height of their button counterpart
-  box-sizing: border-box; // Makes inputs behave like true block-level elements
 }
 
 

vendors/bootstrap/less/type.less

@@ -71,7 +71,6 @@ hr {
   margin: 1.43em 0;
   border: 0;
   border-bottom: 1px solid var(--hr-color, #eee);
-  box-sizing: content-box;
   height: 0;
 }