diff --git a/resources/dist/index.js b/resources/dist/index.js
index 8230d2868..d45b85825 100644
Binary files a/resources/dist/index.js and b/resources/dist/index.js differ
diff --git a/resources/dist/index.js.map.json b/resources/dist/index.js.map.json
index be7088e0e..0929ec648 100644
Binary files a/resources/dist/index.js.map.json and b/resources/dist/index.js.map.json differ
diff --git a/src/ui/renderer.js b/src/ui/renderer.js
index 7485084c7..7775fef83 100644
--- a/src/ui/renderer.js
+++ b/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 )
diff --git a/src/ui/templates/referencePreview/referencePreview.js b/src/ui/templates/referencePreview/referencePreview.js
index 4353446cd..09ec69579 100644
--- a/src/ui/templates/referencePreview/referencePreview.js
+++ b/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;
diff --git a/src/ui/templates/referencePreview/referencePreview.less b/src/ui/templates/referencePreview/referencePreview.less
index c63137e58..d1e1a0385 100644
--- a/src/ui/templates/referencePreview/referencePreview.less
+++ b/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 {
diff --git a/tests/node-qunit/ui/renderer.test.js b/tests/node-qunit/ui/renderer.test.js
index 1a19dba92..e25e20f2f 100644
--- a/tests/node-qunit/ui/renderer.test.js
+++ b/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(