From 1d0b6052e6daf81c28f4f133427c19de8da796e6 Mon Sep 17 00:00:00 2001
From: Sergio Gimeno <sgimeno@wikimedia.org>
Date: Tue, 11 Jun 2024 19:29:15 +0200
Subject: [PATCH] Adjust notification popup arrow in small screens

Use the max width breakpoint from wikimedia-ui-base
to add or remove popup container padding. That is
because the container has no padding in small
screens (when Vector's header breaks in two rows).

Bug: T366672
Change-Id: Idb0f844189cc221009cbb3e06c8c3fe0096bd0c2
---
 modules/ui/mw.echo.ui.NotificationBadgeWidget.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/modules/ui/mw.echo.ui.NotificationBadgeWidget.js b/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
index c9bfd3258..00c54d27a 100644
--- a/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
+++ b/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
@@ -108,6 +108,19 @@
 			.addClass( 'mw-echo-ui-notificationBadgeButtonPopupWidget-footer' )
 			.append( footerButtonGroupWidget.$element );
 
+		const screenWidth = $( window ).width();
+		// FIXME 639 is @max-width-breakpoint-mobile value in wikimedia-ui-base.less,
+		// should be updated with aproppriate JS exported Codex token once available, T366622
+		const maxWidthBreakPoint = 639;
+		const isUnderBreakpointMobile = screenWidth < maxWidthBreakPoint;
+		const mql = window.matchMedia( `(max-width: ${ maxWidthBreakPoint }px)` );
+		const matchMedia = function ( event ) {
+			if ( event.matches ) {
+				this.popup.containerPadding = 0;
+			} else {
+				this.popup.containerPadding = 20;
+			}
+		};
 		this.popup = new OO.ui.PopupWidget( {
 			$content: this.notificationsWidget.$element,
 			$footer: $footer,
@@ -115,7 +128,7 @@
 			hideWhenOutOfView: false,
 			autoFlip: false,
 			autoClose: true,
-			containerPadding: 20,
+			containerPadding: isUnderBreakpointMobile ? 0 : 20,
 			$floatableContainer: this.$element,
 			// Also ignore clicks from the nested action menu items, that
 			// actually exist in the overlay
@@ -130,6 +143,7 @@
 			),
 			classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-popup' ]
 		} );
+		mql.addEventListener( 'change', matchMedia.bind( this ) );
 		// Append the popup to the overlay
 		this.$overlay.append( this.popup.$element );