Change #1010895 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Cite@master] [WIP] Fix and update styling in reference re-use dialog

https://gerrit.wikimedia.org/r/1010895

Test wiki created on Patch demo by Thiemo Kreuz (WMDE) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/8668837e60/wiki/Douglas Adams

Definitively an improvement now that the name does not interrupt or overwrite the content of the reference. I am doubting about the space and prominence the name gets though: to most VE users, the name means nothing, and is an element of the reference that they can not see or interact with anywhere else in VE. There is no way for them to find out why it is there and what it means, but it is very prominent in the re-use dialog now. Could we hide this functionality (to show the name in the re-use tab) under a preference or something, so it is accessible for advanced users who want to use it, but it will not confuse users that have no clue what a ref-tag and refname even are? If not, we should probably develop a better way to incorporate the concept of refnames into the VE editing experience. Do we know if this function is currently essential to any users?

• I found one edge case that does not seem to react fully as expected: When you have both a ref with a name that spans more than 1 line and a word in it that spans more than 1 line, the long word in the ref content is not broken up and appears underneath the ref name (see image).

• I was not able to test the mobile experience with PatchDemo - it only renders the desktop version of the page.

Test wiki created on Patch demo by Thiemo Kreuz (WMDE) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/98dd5de00b/wiki/Douglas Adams

Test wiki on Patch demo by Thiemo Kreuz (WMDE) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/8668837e60/w/

I tweaked the patch a bit. The new demo at https://patchdemo.wmcloud.org/wikis/98dd5de00b/wiki/Douglas_Adams also includes mobile now.

• The behavior in your screenshot is technically correct, as far as I can see. The text on the left wraps around and continues below. There is enough room for the long word there. While there is word-break: break-all I wouldn't use it as it creates way to many unexpected and possibly confusing breaks. Hyphenation might be a possibility, but I'm afraid it's still not stable enough to work reliably in our 300+ languages environment.
• I'm not sure what you mean when you say "prominent". The font size is untouched. The gray text color is the one suggested by Codex.

Generally, a well chosen reference name is as relevant as the content to be able to quickly identify a reference in the list. The name is indexed and can be searched for. I would find it quite confusing when a user is able to find a reference but can't understand why it is found, because the name is invisible. We also still have the problem that some references don't render at all in VE. In such cases the name is the only information available.

Sorry I missed your comments here completely somehow.

Thanks for the mobile demo, it works well there! Interestingly, on mobile the long word does wrap nicely around a long name:

• With regards to that wrapping/whitespace, my original thinking was that it would ideally wrap the long word in the ref content like in the mobile example above, but if I understand you correctly that is difficult to achieve? It's definitely an edge case, so not worth spending a lot of additional time on.
• What I meant when I said 'prominent' is not related to the patch itself, but to the fact that the name is in the re-use tab in such a prominent spot at all, while most VE users will have no idea what it is/means and are not able to see it or interact with it anywhere else in VE. That's why I feel that we need to figure out how to incorporate refnames into VE in a holistic way, or otherwise find a way to make the names less prominent for beginner users. Does that make sense?

• The weird wrapping might be exclusive to your Mac browser. I can't reproduce it in my Chromium build. It really looks like I can't do much about it at the moment.
• Yes, makes sense. My hope was that the change I'm suggesting here actually helps with that, in contrast to the confusing rendering in the very first screenshot.

Do you think it's in a state that can be merged?

Ah yes sorry I could have been more clear: I think it can be merged! It is a clear improvement over the current situation without the patch.

Change #1010895 merged by jenkins-bot:

[mediawiki/extensions/Cite@master] Fix and update styling in reference re-use dialog

https://gerrit.wikimedia.org/r/1010895

Test wiki on Patch demo by Thiemo Kreuz (WMDE) using patch(es) linked to this task was deleted:

https://patchdemo-legacy.wmcloud.org/wikis/98dd5de00b/w/