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

  1. Install the Standard profile and enable Media Library.
  2. Create a few image media items.
  3. Break the thumbnail of one item, e.g. delete the referenced file entity:
    drush php:eval '\Drupal\file\Entity\File::load(FID)->delete();'
  4. 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:

  1. Enable the advanced UI:
    drush config:set media_library.settings advanced_ui 1
  2. Reopen the modal, select the broken item and one working item, then upload a new file via "Add files".
  3. 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.

Issue fork drupal-3614246

Command icon 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

andy-blum created an issue. See original summary.

andy-blum’s picture

andy-blum’s picture

Issue summary: View changes

andy-blum’s picture

Status: Active » Needs review
andy-blum’s picture

mherchel’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new63.15 KB
new51.77 KB

This looks great! Code looks good and works.

Before:

After:

mherchel’s picture

StatusFileSize
new64.37 KB

Note that this isn't an issue in default_admin. No need for followup.