Separate sub-ref content from main content in ContextItem

Bug: T376131
Change-Id: I859298746cf85b75cc27192c1e1c9c136312beea

modules/ve-cite/i18n/en.json

@@ -34,7 +34,7 @@
 	"cite-ve-citationneeded-description": "An editor has indicated that this claim needs a citation to a reliable source.",
 	"cite-ve-citationneeded-reason": "Reason given:",
 	"cite-ve-citationneeded-title": "Citation needed",
-	"cite-ve-dialog-reference-contextitem-extends": "This reference is a re-use with additional details.",
+	"cite-ve-dialog-reference-contextitem-extends": "This reference is a re-use with additional details:",
 	"cite-ve-dialog-reference-editing-add-details": "You're adding additional details to this reference:",
 	"cite-ve-dialog-reference-editing-add-details-placeholder": "Write or paste the information you would like to add to this reference here.",
 	"cite-ve-dialog-reference-editing-reused": "This reference is used {{PLURAL:$1|once|2=twice|$1 times}} on this page.",

modules/ve-cite/ve.ui.MWReferenceContextItem.js

@@ -93,7 +93,10 @@ ve.ui.MWReferenceContextItem.prototype.getReuseWarning = function () {
 ve.ui.MWReferenceContextItem.prototype.getExtendsWarning = function () {
 	if ( this.model.getAttribute( 'extendsRef' ) ) {
 		return $( '<div>' )
-			.addClass( 've-ui-mwReferenceContextItem-muted' )
+			.addClass( [
+				've-ui-mwReferenceContextItem-muted',
+				've-ui-mwReferenceContextItemSubNote'
+			] )
 			.text( ve.msg( 'cite-ve-dialog-reference-contextitem-extends' ) );
 	}
 };
@@ -155,9 +158,9 @@ ve.ui.MWReferenceContextItem.prototype.setup = function () {
 ve.ui.MWReferenceContextItem.prototype.renderBody = function () {
 	this.$body.empty().append(
 		this.getParentRef(),
+		this.getExtendsWarning(),
 		this.getRendering(),
-		this.getReuseWarning(),
-		this.getExtendsWarning()
+		this.getReuseWarning()
 	);
 };
 

modules/ve-cite/ve.ui.MWReferenceContextItem.less

@@ -23,5 +23,9 @@
 		+ .ve-ui-mwReferenceContextItem-muted {
 			margin-top: 0.5em;
 		}
+
+		+ .ve-ui-mwReferenceContextItemSubNote {
+			margin-bottom: 0.5em;
+		}
 	}
 }