Fix loading of related articles via IntersectionObserver

For IntersectionObserver to work the element we listen on needs to
have a non-zero height.

Bug: T223844
Change-Id: I308f646670b112e42b0aaa11c438dbc5cdc5edd8

extension.json

@@ -36,6 +36,13 @@
 	},
 	"manifest_version": 2,
 	"ResourceModules": {
+		"ext.relatedArticles.styles": {
+			"styles": "resources/ext.relatedArticles.styles.less",
+			"targets": [
+				"mobile",
+				"desktop"
+			]
+		},
 		"ext.relatedArticles.cards": {
 			"targets": [
 				"desktop",

includes/Hooks.php

@@ -113,6 +113,7 @@ class Hooks {
 			self::isReadMoreAllowedOnSkin( $out->getUser(), $skin )
 		) {
 			$out->addModules( [ 'ext.relatedArticles.readMore.bootstrap' ] );
+			$out->addModuleStyles( [ 'ext.relatedArticles.styles' ] );
 		}
 
 		return true;

resources/ext.relatedArticles.styles.less

@@ -0,0 +1,19 @@
+@import 'mediawiki.ui/variables';
+
+// Reserve space for the related articles cards.
+// https://phabricator.wikimedia.org/T223844
+// Note this is optimized for 3 related articles which is the majority of cases.
+// There will be a jump when:
+// - a page has no related articles,
+// - a page has more than 3 related articles
+// and there will be visible whitespace on mobile for a page with less than 3.
+.client-js {
+	.read-more-container {
+		// Assumes 3 cards at 78px.
+		min-height: 274px;
+
+		@media ( min-width: @width-breakpoint-desktop ) {
+			min-height: 124px;
+		}
+	}
+}