From 0ca5f68ef3d1e0c7d04ba9a83e548fb7d097a616 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 6 Jan 2017 15:12:35 +0100
Subject: [PATCH] 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.
---
 wcfsetup/install/files/style/ui/message.scss | 32 ++++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

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;
-- 
2.20.1