Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2

Visual changes:
- Reduced spacing above #siteSub
- Updated spacing from #contentSub and #contentSub2

Bug: T311421
Change-Id: I7fd78d2c92007b231cfc49af0fbd02a4f74f3901

includes/SkinVector.php

@@ -475,11 +475,8 @@ abstract class SkinVector extends SkinMustache {
 		// Conditionally used values must use null to indicate absence (not false or '').
 		$commonSkinData = array_merge( $parentData, [
 			'is-legacy' => $this->isLegacy(),
-
 			'input-location' => $this->getSearchBoxInputLocation(),
-
 			'sidebar-visible' => $this->isSidebarVisible(),
-
 			'is-language-in-content' => $this->isLanguagesInContent(),
 			'is-language-in-content-top' => $this->isLanguagesInContentAt( 'top' ),
 			'is-language-in-content-bottom' => $this->isLanguagesInContentAt( 'bottom' ),

includes/SkinVector22.php

@@ -167,7 +167,9 @@ class SkinVector22 extends SkinVector {
 		$isGrid = $featureManager->isFeatureEnabled(
 			Constants::FEATURE_GRID
 		);
-		return $parentData + [
+		return array_merge( $parentData, [
+			// Cast empty string to null
+			'html-subtitle' => $parentData['html-subtitle'] === '' ? null : $parentData['html-subtitle'],
 			'is-vector-grid' => $isGrid,
 			'vector-layout-class' => $isGrid ? 'vector-layout-grid vector-toc-visible' : 'vector-layout-legacy',
 			'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
@@ -185,6 +187,6 @@ class SkinVector22 extends SkinVector {
 					Constants::FEATURE_STICKY_HEADER_EDIT
 				)
 			) : false,
-		];
+		] );
 	}
 }

includes/templates/ContentSubheader.mustache

@@ -9,4 +9,4 @@
     {{/is-language-in-content-top}}
 
     {{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
-</div>
+</div>

includes/templates/skin.mustache

@@ -68,8 +68,8 @@
 
 	<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
 		{{>ContentSubheader}}
-		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
-		<div id="contentSub2">{{{html-undelete-link}}}</div>
+		{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
+		{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
 		{{{html-user-message}}}
 		{{{html-body-content}}}
 		{{{html-categories}}}

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

@@ -96,13 +96,14 @@ body {
 	}
 }
 
-.mw-body-subheader {
-	// avoid margin collapsing by setting a border-bottom and margin-top as this will sometimes
-	// be empty if no indicators.
-	// The total of margin-top and height should be 16px. Since we're using relative units 1em=14px
-	// We need to set both height and margin so that the margin is not ignored.
-	margin-top: 1em;
-	border-bottom: 2px @border-style-base transparent;
+#siteSub {
+	margin-top: 8px; // T311564
+}
+
+#contentSub,
+#contentSub2 {
+	// T311564: Override core styles to apply margin-top rather than margin-bottom
+	margin: 8px 0 0 1em !important; // stylelint-disable-line declaration-no-important
 }
 
 .mw-header {
@@ -111,6 +112,10 @@ body {
 	z-index: @z-index-header;
 }
 
+.mw-body-content {
+	margin-top: 16px;
+}
+
 /* Main column */
 .mw-body,
 #mw-data-after-content,