From aa446962222447f4a0e18d52236eddd29658f461 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Tue, 7 Dec 2021 14:41:46 -0500
Subject: [PATCH] Align `mw.notify()` alerts to avoid overlapping sticky header

Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.

Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
---
 resources/common/variables.less               |  9 +++++++++
 .../components/StickyHeader.less              |  9 +--------
 skinStyles/mediawiki.notification.less        | 19 +++++++++++++++++++
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/resources/common/variables.less b/resources/common/variables.less
index 3c842e27a..f60ab8569 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -121,6 +121,13 @@
 // language button
 @height-lang-button: unit( 32 / @font-size-browser, em );
 
+// T296321 For sticky header, set an explicit height. This is needed for scroll padding
+// and for other sticky elements on the page. Setting the height in relative units enables
+// the header's height to adapt to the browser's font size setting. Because
+// this variable is used to determine top offsets for sticky elements where the
+// font-size might not be 16px, using rem avoids the cascading effects of em units.
+@height-sticky-header: unit( 50px / @font-size-browser, rem );
+
 // Z-indices
 // See skinStyles/jquery.ui/jquery.ui.datepicker.css.
 // @z-index-ui-datepicker-cover: -1;
@@ -150,6 +157,8 @@
 
 // Transitions
 @transition-duration-base: 100ms;
+// Sticky header hide/show transition
+@transition-sticky-header: transform 250ms linear;
 
 //
 // Layout
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index 35ed3712b..f250eb2ad 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -1,13 +1,6 @@
 @import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
 
-// T296321 Set an explicit height. This is needed for scroll padding and for other
-// sticky elements on the page. Setting the height in relative units enables
-// the header's height to adapt to the browser's font size setting. Because
-// this variable is used to determine top offsets for sticky elements where the
-// font-size might not be 16px, using rem avoids the cascading effects of em units.
-@height-sticky-header: unit( 50px / @font-size-browser, rem );
-
 .vector-sticky-header {
 	width: 100%;
 	height: @height-sticky-header;
@@ -17,7 +10,7 @@
 	right: 0;
 	z-index: @z-index-header;
 	transform: translateY( -100% );
-	transition: transform 250ms linear;
+	transition: @transition-sticky-header;
 	display: flex;
 	align-items: center;
 	max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container;
diff --git a/skinStyles/mediawiki.notification.less b/skinStyles/mediawiki.notification.less
index f19b5b237..597887afa 100644
--- a/skinStyles/mediawiki.notification.less
+++ b/skinStyles/mediawiki.notification.less
@@ -16,3 +16,22 @@
 	border-radius: @border-radius-base;
 	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
 }
+
+/**
+ * With the sticky header enabled in modern Vector,
+ * We lower the z-index to make the user menu and language picker
+ * useable when a notification is present.
+ */
+.vector-sticky-header-enabled .mw-notification-area {
+	transition: @transition-sticky-header;
+	z-index: @z-index-menu;
+}
+
+/**
+ * When the sticky header is open in modern Vector,
+ * and the notification bar is also open, the notification
+ * should be moved so that it doesn't obstruct the sticky header
+ */
+.vector-sticky-header-visible ~ .mw-notification-area-overlay > .mw-notification-area-floating {
+	transform: translateY( @height-sticky-header );
+}