Problem/Motivation
For media item labels to be positioned correctly, the enclosing <article>
needs to be position: relative;
. If the page includes the contextual module libraries then the <article>
will have the .contextual-region
class and be styled by this bit in contextual.module.css
.contextual-region {
position: relative;
}
There are legit scenarios such as this one with Experience Builder where the media library is used without contextual present -- even on sites with that module enabled.
It winds up looking like this, with the labels under the images out of place (not hugely so, but still not a great look)
Image may be NSFW.
Clik here to view.
Steps to reproduce
- Claro should be the admin theme
- Add a media library field to any content type.
- There should be existing media available so the issue can be seen.
- The Contextual module needs to be disabled
- Open the media library dialog in the add/edit form for the content type
- Note the labels being misaligned for each media item listed, as seen in the screenshot in the prior section.
Proposed resolution
The element that currently gets the position: relative;
style from the Contextual module should instead get it from CSS provided by media library so it is always applied, not just when Contextual is enabled
Remaining tasks
Review & Test
User interface changes
Some labels that are out of alignment when Contextual is not enabled (see screenshot in Problem/Motivation) will now look the same as if Contextual was enabled.
When there's an after screenshot for this it should include the markup to show it is aligned without the .contextual-region
class present.
Introduced terminology
NA
API changes
NA
Data model changes
NA
Release notes snippet
NA