Problem/Motivation
While working on the media library, I noticed it was getting a horizontal scrollbar on smaller screens. In the seven theme, label elements in forms get a display: table;. In the media library, a visually hidden class is added to hide some labels. The width, height and overflow properties do not work correctly if the element has a table display, causing the visually hidden element to take up space while it shouldn't.
Steps to reproduce:
- Install the standard profile.
- Enable the media and media library module.
- Add a media field to the article node type with at least the image media type enabled.
- Configure the media library widget for the field on the form display.
- Create a new article.
- Open the media library with at least 5 items in it.
- Make your browser window smaller.
Proposed resolution
Add display: block; to the visually-hidden class properties.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
Sign-offs required
DO NOT commit any change to the implementation of. visually-hidden without sign-off from an accessibility maintainer. This can have far-reaching effects, and should be tested with as much assistive tech as possible.