Display notifications in echo callout for mobile view

Override the inline style `width: 0px` on .oo-ui-clippableElement-clippable
elements within .mw-echo-ui-overlay.

Also adjust some other styles for the callout, so that it stays within the
screen width, but is not any wider than it would be otherwise (500px).
Doing so causes the anchor triangle at the top to not align with the
relevant notifications icon, so it is hidden with `display:none`.
(On a narrow mobile screen, it doesn't seem to serve much purpose anyway.)

Bug: T197064
Change-Id: Iaedde85b5c31ab244d4f72c54c9aad6a1b4ebb73

resources/extensions/Echo.less

@@ -77,5 +77,30 @@
 				margin-right: 1.25em;
 			}
 		}
+
+		/* 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;
+					}
+				}
+			}
+		}
 	}
 }