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:

  1. 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.
  2. 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: Screenshot showing these two problems

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

  1. Do not exceed the browser's height or width for the modal, but still max each at 900px.
  2. Include basic styling for the media library browser, so that images align in a grid.

Remaining tasks

Needs testing and code review.

CommentFileSizeAuthor
#5 issue_3276732_screenshot_2.png532.54 KBkrisahil

Issue fork patternkit-3276732

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

krisahil created an issue. See original summary.

krisahil’s picture

Title: Media library modal vertically cut off » Media library modal UI issues: Missing styles and and modal chopped off
Issue summary: View changes
krisahil’s picture

Issue summary: View changes
krisahil’s picture

Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new532.54 KB

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

mariohernandez’s picture

Status: Needs review » Fixed
Parent issue: » #3278420: Beta 4 release plan

Status: Fixed » Closed (fixed)

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