Problem/Motivation
In Claro, a media library grid item gets its height entirely from the thumbnail image (.media-library-item--grid .field--name-thumbnail img { height: 180px; }). Every other part of the card is absolutely positioned over the preview: the select checkbox, the "unpublished" badge, the edit/remove buttons, and the item name (.media-library-item__attributes, pinned to bottom: 0 in the 34px space reserved by .media-library-item__preview's padding-bottom).
When a media item has no preview image, the preview collapses to 34px. The name overlay then lands at the top of the card underneath the checkbox, and because its max-height: calc(100% - 50px) resolves to a negative value, the name disappears entirely. In the media library modal opened from a media reference field, the item renders as a blank white card containing only a checkbox.
This happens with any media item whose thumbnail does not render, for example:
- the thumbnail's file entity or the file on disk has been deleted;
- an oEmbed provider's thumbnail fetch failed (see #3080666, where comment #3 describes this exact symptom and a site-level min-height workaround);
- contrib media source plugins that fail to generate a thumbnail (e.g. #3084707).


Steps to reproduce
- Install the Standard profile and enable Media Library.
- Create a few image media items.
- Break the thumbnail of one item, e.g. delete the referenced file entity:
drush php:eval '\Drupal\file\Entity\File::load(FID)->delete();' - Add a media reference field to a content type using the media library widget, edit a node, and open the "Add or select media" modal (also visible at
/admin/content/media-grid).
Result: the item without a thumbnail is a blank card; its name is not visible. In the grid at /admin/content/media-grid the "unpublished" badge and checkbox also overlap the (invisible) name overlay.
The smaller cards in the add form's "Additional selected media" area are affected the same way:
- Enable the advanced UI:
drush config:set media_library.settings advanced_ui 1 - Reopen the modal, select the broken item and one working item, then upload a new file via "Add files".
- On the resulting add form, expand "Additional selected media".
Result: the pre-selected item without a thumbnail collapses to its checkbox; its name is not visible.
Proposed resolution
Keep the overlay positioning (it is what allows the name to expand over the image on hover/selection without reflowing the grid), but stop deriving the card height solely from the image. Give the preview a min-height matching the thumbnail heights already defined in media-library.pcss.css:
.media-library-item--grid .media-library-item__preview { min-height: 180px; /* Matches the thumbnail image height. */ } .media-library-add-form__selected-media .media-library-item--small .media-library-item__preview { min-height: 100px; /* Matches the smaller thumbnail image height. */ }
Because these boxes are content-box, the min-height plus the existing 34px padding-bottom equals the height of a card with an image, so mixed grids stay aligned.


User interface changes
Media library grid items without a renderable thumbnail keep the same dimensions as other items; their name, checkbox, and status badge display in the normal positions. No change for items with thumbnails.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | admin.png | 64.37 KB | mherchel |
| #7 | fixed.png | 51.77 KB | mherchel |
| #7 | broken.png | 63.15 KB | mherchel |
| #2 | Screenshot 2026-07-31 at 10.31.22 AM.png | 79.92 KB | andy-blum |
| #2 | Screenshot 2026-07-31 at 10.31.38 AM.png | 67.48 KB | andy-blum |
Issue fork drupal-3614246
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
andy-blumComment #3
andy-blumComment #5
andy-blumComment #6
andy-blumComment #7
mherchelThis looks great! Code looks good and works.
Before:

After:

Comment #8
mherchelNote that this isn't an issue in default_admin. No need for followup.