Scroll reference heading as well

Bug: T249548
Change-Id: I808ee9aadc8766490e98267bb94d25887f404362

src/ui/renderer.js

@@ -268,7 +268,7 @@ export function show(
 
 	// Trigger fading effect for reference previews after the popup has been rendered
 	if ( preview.el.hasClass( 'mwe-popups-type-reference' ) ) {
-		preview.el.find( '.mw-parser-output' ).first().trigger( 'scroll' );
+		preview.el.find( '.mwe-popups-scroll' ).first().trigger( 'scroll' );
 	}
 
 	return wait( 200 )

src/ui/templates/referencePreview/referencePreview.js

@@ -42,12 +42,14 @@ export function renderReferencePreview(
 
 	const $el = renderPopup( model.type,
 		`
-			<strong class='mwe-popups-title'>
-				<span class='mw-ui-icon mw-ui-icon-element mw-ui-icon-reference-${type}'></span>
-				${title}
-			</strong>
 			<div class='mwe-popups-extract'>
-				<div class='mw-parser-output'>${model.extract}</div>
+				<div class='mwe-popups-scroll'>
+					<strong class='mwe-popups-title'>
+						<span class='mw-ui-icon mw-ui-icon-element mw-ui-icon-reference-${type}'></span>
+						${title}
+					</strong>
+					<div class='mw-parser-output'>${model.extract}</div>
+				</div>
 				<div class='mwe-popups-fade' />
 			</div>
 			<footer>
@@ -85,7 +87,7 @@ export function renderReferencePreview(
 		} );
 	}
 
-	$el.find( '.mw-parser-output' ).on( 'scroll', function ( e ) {
+	$el.find( '.mwe-popups-scroll' ).on( 'scroll', function ( e ) {
 		const element = e.target,
 			// We are dealing with floating point numbers here when the page is zoomed!
 			scrolledToBottom = element.scrollTop >= element.scrollHeight - element.clientHeight - 1;

src/ui/templates/referencePreview/referencePreview.less

@@ -5,7 +5,7 @@
 
 .mwe-popups.mwe-popups-type-reference {
 	.mwe-popups-title {
-		margin-top: @popupPadding;
+		margin: 0 0 @popupPadding;
 
 		.mw-ui-icon {
 			vertical-align: middle;
@@ -29,11 +29,15 @@
 	.mwe-popups-extract {
 		margin-right: 0;
 		margin-bottom: 2.75 * @lineHeight;
-		// Reference previews should have a "lighter" appearence than page previews, where the
-		// maximum is 7 lines.
-		max-height: 5 * @lineHeight;
-		// Reference previews can be smaller than page previews, where the minimum is 2 lines.
-		min-height: @lineHeight;
+		max-height: inherit;
+
+		.mwe-popups-scroll {
+			// Reference previews should have a "lighter" appearence than page previews, where the
+			// maximum is 7 lines.
+			max-height: 24px + @popupPadding + 5 * @lineHeight;
+			overflow: auto;
+			padding-right: @popupPadding;
+		}
 
 		// Remove the default fade-out effect set by popup.less
 		&:after {
@@ -56,12 +60,6 @@
 		&.mwe-popups-fade-out .mwe-popups-fade {
 			opacity: 1;
 		}
-
-		.mw-parser-output {
-			max-height: inherit;
-			overflow: auto;
-			padding-right: @popupPadding;
-		}
 	}
 
 	.mwe-popups-read-link {

tests/node-qunit/ui/renderer.test.js

@@ -315,7 +315,7 @@ QUnit.test( 'createReferencePreview(model)', ( assert ) => {
 		'<popups-refpreview-web>'
 	);
 	assert.strictEqual(
-		preview.el.find( '.mwe-popups-extract' ).text().trim(),
+		preview.el.find( '.mw-parser-output' ).text().trim(),
 		'Custom extract with an internal and an external link'
 	);
 	assert.strictEqual(