@Alexhollender it looks like the problem is the letter-spacing CSS rule we use:

letter-spacing: 0.2em;

It causes the link to spill on to a second line which causes this problem.

Are there solutions here that involve removing letter-spacing ?

As @Jdlrobson mentions, the letter-spacing is only a problem because it causes the text to span 2 lines. If the text were longer, even without the letter-spacing, the problem would still occur (as with reference [6] in that article)

The reason the link gets weird when it spans two lines is because it's floated left, causing it to take up 100% space when it spans multiple lines.

If we remove the float, the link defaults to display:inline; and the text can sit beside it no matter how many lines.

I haven't looked into other consequences of the removing the float, but I think that could be a solution.

@Jdlrobson @Jdrewniak: ok, thanks for that information. I think I should create a separate ticket for the external link icon issue. Any ideas on the main issue?

Notice that, in the footnote tooltip, the link is in the wrong position entirely. It should actually be at the very beginning of the footnote.

To clarify what I'm understanding to be the main point of this task, if you compare footnote 11 on https://de.m.wikipedia.org/wiki/Axel_Krau%C3%9Fe:

	screenshot	content (as read by user)	note
desktop		11. Einstimmig: Axel Krauße wird Intendant in Ansbach. In: nachtkritik.de. 12. Februar 2019, abgerufen am 24. Februar 2019.	link comes first, styled without any changes to letter casing
mobile		[11] In: nachtkritik.de. 12. Februar 2019, abgerufen am EINSTIMMIG: AXEL KRAUSSE WIRD INTENDANT IN ANSBACH. 24. Februar 2019.	link comes after "In: nachtkritik.de. 12. Februar 2019, abgerufen am", is rendered in uppercase, is not styled as a link, and it's icon is misaligned.

The link should come first. As Jan points out in T216961#4984077 there is a conflicting float. Removing that rule makes it look like this:

ok, the proposed solution looks good to me. Moving this out of design.

In addition to the float being picked up from the drawer header/title's CSS (.drawer.references .cite .text), it is also picking up other styling rules, which makes the link look different from the rest of the content (letter-spacing, font-size, text-transform). Perhaps we could add the following CSS to .drawer.references .cite .text a:

text-transform: none;
letter-spacing: initial;
font-size: inherit;
color: #6699FF;
float: none;

Note, we use #6699FF for links on dark backgrounds, as defined in T169153. Result:

Since this is in upcoming, maybe we can change the color of the links to a better blue as well while we're at it? T217660
..reads @alexhollender commend above, oh! yeah. I'll mark that task as duplicate...

Change 506424 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Fix display of nested reference drawers

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

Change 506425 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Adds lighter color external link icon for reference drawers

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

I think those two patches fix this nicely :)

@alexhollender @Jdrewniak did I miss a comment about the icon in the top left being converted to white from gray (is that intentional)?

@Jdlrobson nice catch, I don't believe that was intentional.

@Jdlrobson I hope that's an issue with my setup and not a change I made, since it appears that way for me on master (images might be cached though) and I don't think I touched any code that would change that icon.

Change 506424 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Fix display of nested reference drawers

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

Change 506425 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Adds a light-blue variant to the external link icon

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

This just needs QA steps, but I'm having a hard time tracking down similar references other than the exact one in the description.

@pmiazga could I trouble you to please SWAT this change to the beta cluster.

Change 508631 had a related patch set uploaded (by Pmiazga; owner: Jdlrobson):
[operations/mediawiki-config@master] beta: Enable content provider on de beta cluster for QA purposes

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

Change 508631 merged by jenkins-bot:
[operations/mediawiki-config@master] beta: Enable content provider on de beta cluster for QA purposes

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

@Edtadros deployed to Beta cluster

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA Steps

1. Go to https://de.m.wikipedia.org/w/index.php?title=Axel_Krau%C3%9Fe&oldid=185986567&mobileaction=toggle_view_mobile
2. Click on footnote [11].
3. Compare the footnote tooltip to the proposed solution in this task description

✅ Beta:

✅ German Prod Wiki: