Optimized message list / message group list for medium screens

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 9563396592f8cc5a796a08639cc8cfcbe7980952..601a51267cb774f25cd39dd7876384145815f04c 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -123,16 +123,8 @@
        @include screen-md-up {
                align-self: flex-start;
                border-radius: 3px;
-               flex: 0 0 240px;
-               padding: 20px;
                text-align: center;
 
-               & + .messageContent {
-                       flex-basis: calc(100% - 270px);
-                       margin-left: 30px;
-                       max-width: calc(100% - 270px);
-               }
-
                .username {
                        /* required to fix wrapping behavior in combination with
                           `overflow-wrap` / `word-wrap` */
@@ -140,6 +132,28 @@
                }
        }
 
+       @include screen-md {
+               flex: 0 0 200px;
+               padding: 15px;
+               
+               & + .messageContent {
+                       flex-basis: calc(100% - 220px);
+                       margin-left: 20px;
+                       max-width: calc(100% - 220px);
+               }
+       }
+
+       @include screen-lg {
+               flex: 0 0 240px;
+               padding: 20px;
+               
+               & + .messageContent {
+                       flex-basis: calc(100% - 270px);
+                       margin-left: 30px;
+                       max-width: calc(100% - 270px);
+               }
+       }
+
        @include screen-sm-down {
                margin: 0 -10px;
                padding: 10px;

diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss
index b6c06d504a8818a51e7118137ac2ff5b6770ce98..4abb719c7df9335c642d1e0b78a4b1db527042d5 100644 (file)
--- a/wcfsetup/install/files/style/ui/messageGroup.scss
+++ b/wcfsetup/install/files/style/ui/messageGroup.scss
@@ -5,8 +5,15 @@
                }
 
                .columnStats {
-                       flex: 0 0 150px;
                        text-align: center;
+                       
+                       @include screen-lg {
+                               flex: 0 0 150px;
+                       }
+
+                       @include screen-md-down {
+                               flex: 0 0 100px;
+                       }
                }
 
                .columnLastPost {
@@ -242,13 +249,29 @@
                }
        }
 
-       @include screen-sm-down {
+       @include screen-md-down {
                .tabularListColumns > .columnMark {
                        display: none;
                }
 
                .tabularListRowHead {
-                       .columnMark,
+                       .columnMark {
+                               display: none;
+                       }
+
+                       .columnSubject {
+                               padding: 0;
+                       }
+
+                       .columnLastPost {
+                               flex-basis: auto;
+                               padding: 0;
+                       }
+               }
+       }
+
+       @include screen-sm-down {
+               .tabularListRowHead {
                        .columnStats {
                                display: none;
                        }