From 06c243da3507af3e486536612e489b6913df8c4e Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Fri, 16 Sep 2022 07:11:25 -0400
Subject: [PATCH] Modify the sticky header offset styles

- Prevents the ToC in the sidebar from jumping down when the sticky
  header becomes visible
- Removes the `.sticky-header-element` class from the ToC since that
  only modifies the elements position when the sticky header becomes
  visible (whereas in this case, it should be modified when the sticky
  header is enabled, before it's visible).

Bug: T314330
Change-Id: Ic6f50b8dc4f1507d875825d23eb44c24a998eaf7
---
 .../TableOfContentsContainer.mustache         |  2 +-
 .../components/StickyHeader.less              | 23 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/includes/templates/TableOfContentsContainer.mustache b/includes/templates/TableOfContentsContainer.mustache
index 91d5004f..e3e172f2 100644
--- a/includes/templates/TableOfContentsContainer.mustache
+++ b/includes/templates/TableOfContentsContainer.mustache
@@ -1,7 +1,7 @@
 <div class="mw-table-of-contents-container">
 	{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
 	{{#data-toc}}
-	<div class="vector-sticky-toc-container mw-sticky-header-element">
+	<div class="vector-sticky-toc-container">
 		{{>TableOfContents}}
 	</div>
 	{{/data-toc}}
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index d759aff0..63b5fae4 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -157,17 +157,20 @@
 				opacity: 1;
 				transform: translateY( 0 );
 			}
+		}
 
-			// T289817 Override other sticky element offsets to ensure that other
-			// sticky elements (i.e. table headers) appear below the sticky header.
-			//
-			// @stable See the Integration notes for developers section at
-			// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
-			.mw-sticky-header-element,
-			.charts-stickyhead th {
-				/* stylelint-disable-next-line declaration-no-important */
-				top: @height-sticky-header !important;
-			}
+		// - T314330 `.vector-toc-not-collapsed .vector-sticky-toc-container`
+		//   Prevent ToC from jumping when sticky header is enabled.
+		// - T289817 `.mw-sticky-header-element` provides an API for template developers
+		//   to make their templates compatible with the Vector 2022 sticky header.
+		//   @stable See the Integration notes for developers section at
+		//   https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
+		// - `.charts-stickyhead th` makes chart and table headers appear below the sticky header.
+		.vector-toc-not-collapsed .vector-sticky-toc-container,
+		.mw-sticky-header-element,
+		.charts-stickyhead th {
+			/* stylelint-disable-next-line declaration-no-important */
+			top: @height-sticky-header !important;
 		}
 	}
 }