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 fa22243fc76b8345b99b6572e2b8d58756898a00..d7b67cf574763e9507ae53ac3de746c4a18c4496 100644 (file)
--- 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;