Offset the TableOfContents `top` property only when the sticky header is shown

This uses the sticky header's `.mw-sticky-header-element` utility class
to conditionally offset the table of contents to the height of the
sticky header only when the sticky header is enabled.

Bug: T300077
Change-Id: Ibad97a11e708ba19acf27ca82320f7c3e5f80447

includes/templates/skin.mustache

@@ -46,9 +46,9 @@
 
 <div class="mw-workspace-container">
 	{{>Navigation}}
-	{{#data-toc}}
-		{{>TableOfContents}}
-	{{/data-toc}}
+	<div class="mw-table-of-contents-container mw-sticky-header-element">
+		{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
+	</div>
 	<div class="mw-content-container">
 {{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 <main id="content" class="mw-body" role="main">
@@ -100,6 +100,4 @@
 </div>
 	</div> {{! END mw-page-container-inner }}
 </div> {{! END mw-page-container }}
-{{#data-vector-sticky-header}}
-{{>StickyHeader}}
-{{/data-vector-sticky-header}}
+{{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}}

resources/skins.vector.styles/components/TableOfContents.less

@@ -7,9 +7,6 @@
 	max-height: 90vh;
 	overflow: auto;
 	padding: 12px 12px 12px 26px;
-	float: left;
-	position: sticky;
-	top: calc( @height-sticky-header + 1.5em );
 	background-color: @background-color-base;
 	border: @border-base;
 	border-radius: @border-radius-base;

resources/skins.vector.styles/layouts/screen.less

@@ -247,6 +247,15 @@ body {
 	right: 0;
 }
 
+.mw-table-of-contents-container {
+	float: left;
+	position: sticky;
+	// Defaults to the top of the viewport unless .mw-sticky-header-element
+	// overrides it.
+	top: 0;
+	padding-top: 1.5em;
+}
+
 .mw-footer-container {
 	padding-top: 50px;
 	padding-bottom: 82px;