Make personal menu header expand to show (more of) full usernames

* Lose the special casing replacement labels for long usernames and
  just truncate in CSS with '...' or whatever
* Fix weird padding on two-column mode
* Possibly cleaner Echo badge/whatever handling
* Alignment fixes in general

Note: Breaks two-column layout for IE9-. Probably easily fixed (don't
apply that one line to it), but I don't know how, and don't care.

Bug: T161282
Bug: T173215
Change-Id: I7d27e13265ee54767c509387baf6430bd7c4792d

i18n/en.json

@@ -4,7 +4,6 @@
 	},
 	"skinname-timeless": "Timeless",
 	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris, and various styles by the Wikimedia Foundation",
-	"timeless-loggedin": "Your account",
 	"timeless-anonymous": "Anonymous",
 	"timeless-loggedinas": "Logged in as '''$1'''",
 	"timeless-notloggedin": "Not logged in",

i18n/qqq.json

@@ -11,7 +11,6 @@
 	},
 	"skinname-timeless": "{{name}}",
 	"timeless-desc": "{{desc|what=skin|name=Timeless|url=https://www.mediawiki.org/wiki/Skin:Timeless}}",
-	"timeless-loggedin": "Label for logged in users' user menu (if their username is too long to fit)",
 	"timeless-anonymous": "Label for anonymous (not logged in) user menu\n{{Identical|Anonymous}}",
 	"timeless-loggedinas": "Note for personal menu for logged in users noting their current username\n\nParameters:\n* $1 - username",
 	"timeless-notloggedin": "Note for personal menu for anonymous users clarifying that they are not logged in\n{{Identical|Not logged in}}",

includes/TimelessTemplate.php

@@ -531,13 +531,7 @@ class TimelessTemplate extends BaseTemplate {
 
 		// Labels
 		if ( $user->isLoggedIn() ) {
-			// Make sure it fits first (numbers slightly made up, may need adjusting)
-			$fit = empty( $extraTools ) ? 13 : 9;
-			if ( mb_strlen( $userName ) < $fit ) {
-				$dropdownHeader = $userName;
-			} else {
-				$dropdownHeader = $this->getMsg( 'timeless-loggedin' )->text();
-			}
+			$dropdownHeader = $userName;
 			$headerMsg = [ 'timeless-loggedinas', $userName ];
 		} else {
 			$dropdownHeader = $this->getMsg( 'timeless-anonymous' )->text();

resources/extensions/Echo.less

@@ -1,54 +1,40 @@
 @import '../variables.less';
 
 @media screen {
-	.mw-echo-alert {
-		display: block;
-		padding: 0.25em 1em;
-		margin: 0 -1em;
+	div.mw-echo-ui-overlay {
+		z-index: 100;
 	}
 
 	/* Handle and position Echo icons */
-
-	#personal h2,
-	#personal-extra,
-	#personal-extra ul,
-	#personal-extra li {
-		display: inline-block;
-	}
-
 	#personal-extra {
-		// Position and keep it from randomly overflowing massively for no apparent reason
-		margin: 0.7em 0 -2em 0;
 		white-space: nowrap;
 
 		ul {
 			list-style: none;
-			margin: 0 -1em 0 0;
+			margin: 0.85em 0 0;
 			padding: 0;
 		}
 
 		li {
-			margin: 0 0.75em 0 0;
+			margin: 0 0.4em 0 0;
 			float: left;
 		}
 	}
 
-	@media ( min-width: @desktop-small-floor ) {
-		#personal-extra {
-			float: left;
-			margin-left: -4.5em;
+	@media ( min-width: @desktop-mid-floor ) {
+		div#personal {
+			padding-left: 0;
 		}
 
-		.extension-icons {
-			#p-search {
-				margin-right: 21em;
-			}
+		#personal-extra {
+			float: left;
+			padding: 0 0.75em;
 		}
 	}
 
 	@media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) {
 		.extension-icons #p-search {
-			margin-right: 11em;
+			margin-right: 10em;
 		}
 
 		#personal-extra {
@@ -56,18 +42,6 @@
 		}
 	}
 
-	@media ( min-width: @desktop-mid-floor ) and ( max-width: @desktop-mid-width ) {
-		.extension-icons {
-			#user-tools {
-				width: auto;
-			}
-
-			.color-middle {
-				margin-right: @column-left-size + 2 * @content-padding + 4em;
-			}
-		}
-	}
-
 	@media ( max-width: @mobile-width ) {
 		.mw-echo-ui-notificationBadgeButtonPopupWidget {
 			z-index: 2;

resources/screen-misc.less

@@ -14,3 +14,45 @@
 		}
 	}
 }
+
+// uuuuugh wat I don't know what's going on, everything after this is possibly a horrible idea
+// trying to handle changeable-width username container, I guess?
+@media screen and ( min-width: @desktop-mid-floor ) {
+	#mw-header {
+		.flex-display;
+	}
+
+	#user-tools {
+		.flex(0, 1, auto, 3);
+		display: inline-block;
+
+		h2 span {
+			display: inline-block;
+			max-width: 300px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		// Because the overflow:hidden above messes up the alignment...
+		#personal h2:after {
+			height: 18px;
+		}
+	}
+
+	#p-logo-text {
+		.flex(0, 0, @column-left-size, 1);
+	}
+
+	#p-search {
+		.flex(1, 1, auto, 2);
+		// this line breaks IE for mid (two-column), too, but whatever
+		margin: 0;
+	}
+}
+
+@media screen and ( min-width: @desktop-large-floor ) {
+	#user-tools {
+		min-width: @column-right-size;
+	}
+}