Better handle positioning of Echo badges

Why the hork is this skin so damn complicated to begin with? A
saner DOM and it'd all just figure itself out, no problem...

Change-Id: I5409f3e1c14820332e94166f1ab24a343e20e8a1

resources/extensions/Echo.less

@@ -5,26 +5,25 @@
 		z-index: 100;
 	}
 
-	.mw-echo-alert {
+	/* Handle and position Echo icons */
-		display: block;
+	#pt-notifications-alert .mw-echo-notifications-badge,
-		padding: 0.25em 1em;
+	#pt-notifications-notice .mw-echo-notifications-badge {
-		margin-left: -1em;
+		// Temporary in case Echo is still -5px
-		margin-right: -1em;
+		top: 0;
 	}
 
-	/* Handle and position Echo icons */
 	#personal-extra {
 		white-space: nowrap;
 
 		ul {
 			list-style: none;
-			margin: 0.85em 0 0;
 			padding: 0;
+			margin: 0.5em;
 		}
 
 		li {
-			margin: 0 0.4em 0 0;
+			margin: 0 0.25em;
-			float: left;
+			display: inline-block;
 		}
 	}
 
@@ -35,48 +34,17 @@
 
 		#personal-extra {
 			float: left;
-			padding: 0 0.75em;
 		}
 	}
 
 	@media ( max-width: @mobile-width ) {
-		.mw-echo-ui-notificationBadgeButtonPopupWidget {
-			z-index: 2;
-		}
-
 		#personal-extra {
 			position: absolute;
 			top: 0.9em;
-			right: 8.75em;
+			right: 7.5em;
 
 			li {
-				margin-right: 1.25em;
+				margin-right: 0.75em;
-			}
-		}
-
-		/* Temporary hack:
-		 * Make notifications visible. !important is for overriding echo's inline styles.
-		 * Remove all of this once the underlying OOUI issue is fixed in general for mobile displays.
-		 */
-		.mw-echo-ui-overlay {
-			margin: 0 10px;
-
-			.oo-ui-popupWidget-anchored > .oo-ui-popupWidget-anchor {
-				display: none;
-			}
-
-			.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
-				left: 0 !important;
-				width: 100%;
-
-				.oo-ui-popupWidget-popup {
-					width: initial !important;
-					max-width: 500px;
-
-					.oo-ui-clippableElement-clippable {
-						width: 100% !important;
-					}
-				}
 			}
 		}
 	}