From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 9 Jun 2022 16:39:09 +0000 (+0200)
Subject: Optimized message list / message group list for medium screens
X-Git-Tag: 5.5.0_RC_2~24
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b844e0c0baf34dd19925af57870c657126064706;p=GitHub%2FWoltLab%2FWCF.git

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 9563396592..601a51267c 100644
--- 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 b6c06d504a..4abb719c7d 100644
--- 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;
 			}