From a3a609153482593c2715dbbb9b69aab97b8b1ef2 Mon Sep 17 00:00:00 2001
From: thiemowmde <thiemo.kreuz@wikimedia.de>
Date: Wed, 13 Mar 2024 13:42:57 +0100
Subject: [PATCH] Fix and update styling in reference re-use dialog

This makes the dialog's behavior much more robust, especially when
confronted with overly long and complex references.
* Limit the height of list items to avoid the situation where a
  single item overflows the dialog. This makes it especially hard
  to navigate with the cursor keys. We can't see any more what's
  going on. The proposed height is intentionally a very high upper
  bound, equivalent to about 2/3 of the dialog's height.
* Limit the name on the right side to take up less than half of an
  item. The left side is for the content. Usually the names are very
  short anyway. But if a name is long it currently creates a mess
  where the name is intertwined with the content.
* Break overly long words in references.
* Changing the opacity to use upstream values makes the dimmed names
  a bit darker. I think this is good, even necessary for legibility.

Technical changes:
* Use LESS variables from upstream, where possible.
* Remove redundant `relative` already set upstream.

Bug: T372385
Change-Id: Ie59b7b7e4aa7eadc8f82b39884313f5aa8cfd950
---
 .../ve.ui.MWReferenceResultWidget.less        |  7 +++++--
 .../ve.ui.MWReferenceSearchWidget.less        | 20 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/modules/ve-cite/ve.ui.MWReferenceResultWidget.less b/modules/ve-cite/ve.ui.MWReferenceResultWidget.less
index bc731648d..d5ea3d7df 100644
--- a/modules/ve-cite/ve.ui.MWReferenceResultWidget.less
+++ b/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;
 	}
 }
diff --git a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less
index ef6f03abd..e4fcf3a48 100644
--- a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less
+++ b/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;
 	}
 }