From 5f52acdfe4347d21c2cd24cdd6765e43771bdf45 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 11 Apr 2016 17:14:07 +0200
Subject: [PATCH] Improved message list on mobile

---
 wcfsetup/install/files/style/ui/message.scss | 47 +++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index db38711c65..d895d0a73e 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -1,18 +1,21 @@
 .messageList {
-	border: 1px solid $wcfContentBorder;
-	border-width: 1px 0;
+	border-bottom: 1px solid $wcfContentBorder;
 	
-	> li {
-		@include large-screen-only {
-			padding: 30px 0;
-		}
+	@include large-screen-only {
+		border-top: 1px solid $wcfContentBorder;
 		
-		@include small-screen-only {
-			padding: 20px 0;
+		> li {
+			padding: 30px 0;
+			
+			&:not(:first-child) {
+				border-top: 1px solid $wcfContentBorder;
+			}
 		}
-		
-		&:not(:first-child) {
-			border-top: 1px solid $wcfContentBorder;
+	}
+	
+	@include small-screen-only {
+		> li {
+			padding-bottom: 20px;
 		}
 	}
 }
@@ -158,7 +161,27 @@
 		left: 0;
 		pointer-events: none;
 		position: absolute;
-		bottom: 0;
+		
+		@include large-screen-only {
+			bottom: 0;
+		}
+		
+		@include small-screen-only {
+			color: transparent;
+			padding: 0;
+			width: 0;
+			
+			&::before {
+				background-color: inherit;
+				border: 1px solid rgba(255, 255, 255, 1);
+				border-radius: 50%;
+				content: "";
+				height: 16px;
+				left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
+				position: absolute;
+				width: 16px;
+			}
+		}
 	}
 }
 
-- 
2.20.1