Merge "Fix and update styling in reference re-use dialog"

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

@@ -8,8 +8,10 @@
 @import 'mediawiki.skin.variables.less';
 
 .ve-ui-mwReferenceResultWidget {
-	position: relative;
 	padding: 1em;
+	// Limit extremely large references to not overflow the dialog
+	max-height: 12em;
+	overflow: hidden;
 	border-bottom: @border-width-base @border-style-base @border-color-muted;
 
 	&:last-child {
@@ -24,7 +26,8 @@
 
 	&.oo-ui-labelElement .oo-ui-labelElement-label {
 		white-space: normal;
-		// Disable click events in the preview
+		// Ignore clicks on e.g. <a> elements that are part of the reference's text
 		pointer-events: none;
+		word-wrap: break-word;
 	}
 }

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

@@ -5,20 +5,34 @@
  * @license MIT
  */
 
+@import 'mediawiki.skin.variables.less';
+
 .ve-ui-mwReferenceSearchWidget {
+	// How the footnote marker appears in the text, e.g. [1]
 	&-citation {
 		float: left;
 		margin-right: 0.75em;
 	}
 
+	// A reference's unique identifier as provided via the name="…" attribute
 	&-name {
-		opacity: 0.53; /* results in #787878 which is almost exactly Gray500 */
+		opacity: @opacity-medium;
 		float: right;
 		margin-left: 0.75em;
 		margin-bottom: 0.05em;
+		// Limit overly long names and push them to the side
+		max-width: 40%;
+		text-align: right;
+
+		// Names like ":0" are less meaningful, still useful esp. when switching to wikitext
+		&-autogenerated {
+			opacity: @opacity-low;
+		}
 	}
 
-	&-name-autogenerated {
-		opacity: 0.2; /* results in #cccccc which is almost exactly Gray300 */
+	// Preview the reference's content with less whitespace, relevant when it contains e.g. tables
+	.ve-ui-mwPreviewElement * {
+		margin-bottom: 0;
+		margin-top: 0;
 	}
 }