Media library css is broken with the Gin theme

I was having this problem as well and had a similar solution in place (based on this issue). However, after recent Drupal and module updates, my fix introduced a regression error. I started seeing a problem where the Media Library thumbnails were full width in the modal (giant images). In particular, the Media Library can be accessed in the Form Display widget for media entity reference fields or in the CKEditor media embed browser. The responsive CSS code would fix the reference fields but break the CKEditor embed browser.

Ultimately, I now only need the following and removed the various media query workarounds:

.media-library-item--grid {
  width: 100%;
}

And a follow up to my last post - unfortunately, this problem is still around for some situations. So I still need to explore a more refined approach.

Patch with force padding to view more media part

With some help, it looks like the fix is to scope the 100% width more specifically to gin.

.gin-entity-browser .media-library-item--grid {
  width: 100%;
}

The main takeaway is:

• Prevents making thumbnails on main Media Library page giant: /admin/content/media-grid
• Fixes thumbnails in Media Library browser in CKEditor4 media entity embed
• Fixes thumbnails in Media Library browser in Media Entity Reference fields

Note that I happened to have an old field still using the Media Entity Browser widget (not Media Library). That one was still showing the tiny thumbnails. So the solution was to set this to use the same widget as all the other Media Entity Reference fields.

Same error here