From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 6 Jan 2017 14:12:35 +0000 (+0100)
Subject: Stop using flexbox for messages on screen-xs/sm
X-Git-Tag: 3.0.0~29
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0ca5f68ef3d1e0c7d04ba9a83e548fb7d097a616;p=GitHub%2FWoltLab%2FWCF.git

Stop using flexbox for messages on screen-xs/sm

There are no benefits from using flexbox as these components are
displayed in a classic block-like behavior. Bonus points for having less
active declarations in the base CSS.
---

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index fa22243fc7..d7b67cf574 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -85,10 +85,8 @@
 }
 
 .message {
-	display: flex;
-	
-	@include screen-sm-down {
-		flex-direction: column;
+	@include screen-md-up {
+		display: flex;
 	}
 	
 	.messageClipboardCheckbox {
@@ -133,7 +131,6 @@
 	}
 	
 	@include screen-sm-down {
-		flex: 0 0 auto;
 		margin: 0 -10px;
 		padding: 10px;
 		
@@ -266,15 +263,17 @@
 
 /* content */
 .messageContent {
-	display: flex;
-	/* do not use `flex: 1 1 0%` as it causes Mobile Safari to fail */
-	flex: 1;
-	flex-direction: column;
-	
 	@include screen-sm-down {
 		position: relative;
 	}
 	
+	@include screen-md-up {
+		display: flex;
+		/* do not use `flex: 1 1 0%` as it causes Mobile Safari to fail */
+		flex: 1;
+		flex-direction: column;
+	}
+	
 	&.loading {
 		position: relative;
 		
@@ -299,8 +298,11 @@
 /* content - header */
 .messageHeader {
 	display: flex;
-	flex: 0 0 auto;
 	justify-content: flex-end;
+	
+	@include screen-md-up {
+		flex: 0 0 auto;
+	}
 		
 	+ .messageBody {
 		margin-top: 20px;
@@ -414,7 +416,9 @@
 
 /* content - body */
 .messageBody {
-	flex: 1 1 auto;
+	@include screen-md-up {
+		flex: 1 1 auto;
+	}
 	
 	&.editor {
 		align-items: center;
@@ -446,7 +450,9 @@
 
 /* content - footer */
 .messageFooter {
-	flex: 0 0 auto;
+	@include screen-md-up {
+		flex: 0 0 auto;
+	}
 	
 	.formSubmit {
 		margin-top: 20px;