From c4efbb3d6a24b3eecb63e4017cf4483c16369acf Mon Sep 17 00:00:00 2001
From: Clare Ming <cming@wikimedia.org>
Date: Mon, 12 Jul 2021 12:23:39 -0600
Subject: [PATCH] Update styles for talk message at lower port widths.

Bug: T284243
Depends-On: Icb349987c5f5939b7f4ffa477ac1ecb35b5425e7
Change-Id: I69bc3a1aea6b5a640b91c67f5beae4c263c8d31a
---
 skinStyles/ext.echo.styles.alert.less | 39 ++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/skinStyles/ext.echo.styles.alert.less b/skinStyles/ext.echo.styles.alert.less
index 28406fd..0560026 100644
--- a/skinStyles/ext.echo.styles.alert.less
+++ b/skinStyles/ext.echo.styles.alert.less
@@ -1,16 +1,37 @@
 @import 'mediawiki.ui/variables.less';
+@import 'mediawiki.skin.variables.less';
 
-//  The "you have new messages" bar should be hidden at lower resolutions (temporary solution until T284243)
 .vector-user-links {
-	#ca-talk-alert {
-		display: none;
-
-		@media ( min-width: @width-breakpoint-tablet ) {
-			display: inline-block;
-		}
-	}
-
 	#pt-notifications-alert {
 		margin-right: 0.75em;
 	}
+
+	.vector-menu-content-list {
+		.mw-echo-alert {
+			margin: 0 0 0 0.2em;
+			padding: 0.2em 0.5em;
+			white-space: nowrap;
+
+			.mw-ui-icon.mw-ui-icon-before:before {
+				display: none;
+			}
+		}
+
+		@media ( max-width: @width-breakpoint-desktop ) {
+			#ca-userpage {
+				display: none;
+			}
+		}
+
+		@media ( max-width: @width-breakpoint-desktop-wide ) {
+			.mw-echo-alert {
+				font-size: 12px;
+				position: absolute;
+				top: calc( 100% + 12px );
+				right: 0;
+				margin-left: 0.75em;
+				padding-top: 0.25em;
+			}
+		}
+	}
 }