Problem/Motivation

Mercury Editor adds some custom styles which make the thumbnails take up a fraction of the container. ME treats the view as a CSS Grid where Claro expects to use Flex

Steps to reproduce

Using Claro as the administration theme and latest version of Mercury Editor (though this bug has existed previously).
Edit a node using mercury editor with a media library field.

Proposed resolution

Removing:

mercury-dialog .media-library-views-form__rows {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

From mercury_editor/build/css/overrides/claro/media-library.css seems to do the trick

CommentFileSizeAuthor
#4 mercury_editor-3471287-4.patch1.14 KBckng
#2 mercury_editor-tiny-media-library-3471287-2.patch583 bytessbubaron
mercury-editor-media-library.png32.99 KBsbubaron

Issue fork mercury_editor-3471287

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:

About issue forks

Comments

sbubaron created an issue. See original summary.

sbubaron’s picture

sbubaron commented
StatusFileSize
new mercury_editor-tiny-media-library-3471287-2.patch583 bytes

Created a patch...this is a first time for me so apologies if I didn't do it correctly.

ckng made their first commit to this issue’s fork.

ckng’s picture

ckng
Primary language English
commented
Version: 2.1.2 » 2.1.x-dev
Status: Active » Needs review
StatusFileSize
new mercury_editor-3471287-4.patch1.14 KB

Updated patch with updated source and build.

ckng changed the visibility of the branch 3471287-tiny-media-library to hidden.

ckng opened merge request !67

krystianbuczak’s picture

krystianbuczak commented

Those CSS rules have been added in the commit https://git.drupalcode.org/project/mercury_editor/-/commit/448d0b632a2ff... as a kind of override of Claro claro/media_library.theme library related somehow with gin_toolbar module. In my opinion Mercury Editor should avoid such dependency assumptions. I would recommend simply remove the override. If this is really something crucial, maybe try to style it conditionally in the context of enabled gin_toolbar module or require dependency to gin_toolbar module in mercury_editor.info file.

Temporary workaround is to stop loading the CSS file by adding below override to *.info file in own, custom admin theme:

libraries-override:
  mercury_editor/claro.media_library.theme:
    css:
      theme:
        build/css/overrides/claro/media-library.css: false

sethhill made their first commit to this issue’s fork.

sethhill opened merge request !74

sethhill’s picture

sethhill commented

I agree with krystianbuczak in #7. New MR !74 removes the overrides and allows the media library to display as styled by Claro.

I have seen issues when using Mercury with Gin as the admin theme, though. One approach that often resolves these is to explicitly set the Mercury Editor Edit Tray theme to Claro in Mercury Editor settings.

  • sethhill committed c805ec8b on 2.1.x 
    Issue #3471287 by sbubaron, ckng, sethhill: Tiny Media Library Grid...
sethhill’s picture

sethhill commented
Status: Needs review » Fixed

  • sethhill committed c805ec8b on 2.2.x 
    Issue #3471287 by sbubaron, ckng, sethhill: Tiny Media Library Grid...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.