Problem/Motivation
The submodule patternkit_media_library provides a modal to launch Drupal's media library browser (in a modal), so that you can pick an image. There are two UI-related problems:
- The modal window modal is hard-coded to a width and height of both 900px. This works fine if your screen is both taller and wider than 900px. If your screen is, for example, shorter than 900px, then part of the modal gets cut off in your window, make it difficult (if not impossible) to interact with the contents of the modal.
- If you use this modal on a Layout Builder-enabled entity form, the items in the media browser may not have adequate styling. E.g., in the browser's grid layout, the images may not actually be laid out in a grid. The grid styling depends on whether your public theme provides the correct styles (certain Drupal core themes do, but many contrib/custom themes do not).
Example: 
Steps to reproduce
- On a vanilla Drupal 9 site with "standard" profile, install these modules: patternkit_example, layout_builder, and patternkit_media_library
- Enable Layout Builder for a node type.
- Set "Stark" as the default theme.
- On the Layout page for one of those nodes, add a Patternkit block that has an image field (see below for schema example).
- Click button "Select/Upload Media" to open the media browser modal.
- If you screen is shorter than 900px and there are many items in your media library (e.g., so that there are more than 1 page of results), the button "Insert selected" is not accessible (see problem #1 above).
- Notice that the images are not aligned in a grid, even though the media browser is supposed to use a grid layout (see problem #2 above).
To add an image field to a Patternkit block, you can use this schema:
"image_url": {
"title": "Image URL",
"type": "string",
"format": "image"
}
Proposed resolution
- Do not exceed the browser's height or width for the modal, but still max each at 900px.
- Include basic styling for the media library browser, so that images align in a grid.
Remaining tasks
Needs testing and code review.
Comments
Comment #3
krisahil commentedComment #4
krisahil commentedComment #5
krisahil commentedComment #8
mariohernandez commented