From 8c36871f1b234b5cec1b28e1f634ac7de8a0dbdb Mon Sep 17 00:00:00 2001
From: Nicholas Ray <nray@wikimedia.org>
Date: Tue, 3 Aug 2021 15:16:43 -0600
Subject: [PATCH] Add max-width to user menu and text-overflow: ellipsis

When implementing how to cut overflowing text, a white fade out was
considered instead of an ellipsis, but that implementation brings
additional complexity when considering the user menu's hover states.

Therefore, the widely used `text-overflow: ellipsis` was used instead
with approval from the designer [1]

[1] https://phabricator.wikimedia.org/T287522#7255400

Bug: T287522
Change-Id: I49e6084bd621ca1637fbd167c8eaf8c07ee695ca
---
 resources/skins.vector.styles/components/UserLinks.less | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less
index 15f05ce..c60cd50 100644
--- a/resources/skins.vector.styles/components/UserLinks.less
+++ b/resources/skins.vector.styles/components/UserLinks.less
@@ -68,6 +68,7 @@
 
 		.vector-menu-content {
 			min-width: 200px;
+			max-width: 350px;
 			top: 100%;
 			left: unset;
 			right: 0;
@@ -111,6 +112,11 @@
 
 			span {
 				font-size: @font-size-user-links;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				// Overrides .mw-ui-icon's `line-height: 0` property so that the text is
+				// visible when not overflowing.
+				line-height: initial;
 			}
 
 			// Set hover color for "Create account" and "Login" menu items.