Steps to replicate the issue:
- Open a page using sub-references on a mobile device (using the Minerva skin) and start editing using VE
- Select a sub-reference where the main ref content is longer than ~6 lines (might be more/less depending on the screen size)
What happens?:
- Sub-ref details are not shown and the "edit details" icon gets misaligned. When trying to click on it, the "delete" button gets selected instead
- Scrolling within the context item shows the sub-ref details, but the edit icon doesn't move
- Depending on the main ref length, the "edit details" icon sometimes only gets slightly misaligned...
- ... but sometimes disappears almost entirely
What should have happened instead?:
- Show the edit icon next to the sub-ref details
- Notice that the issue doesn't appear if the screen is large enough or in horizontal view
Other information (browser name/version, screenshots, etc.):
- Screenshots above taken from https://de.wikipedia.org/wiki/Abbreviated_Injury_Scale on my mobile device (Google Chrome on iOS)
- VE Suggestion Mode was activated while taking the screenshots (hence the grey sidebar on the right), but the issue also occurs without it
- @ElineWMDE there might be an additional issue for WMDE-Design given that users don't even see that there are sub-ref details in some cases (only when scrolling within the context item). The same issue also applies for the "add details" icon which also isn't visible if the main ref content is too long -> T415895: Design: long references hide add details button and edit pen in Visual Editor's contextItem.