mediapicker field is not displayed as it should anymore

[DrDroid-FR]

I worked on a GRAV 1.7.26 (PHP 7.4.8) website with custom admin tab including a mediapicker field. The mediapicker displayed well. Since I updated GRAV to 1.7.39.X with all plugins, the mediapicker is not displayed as it should anymore. The scrollbars are not included (the modal scrolls) and the lists (tree and media) are displayed after the container.

I tried to install a fresh GRAV site and test the mediapicker field in the admin and I have the same result : Enregistrement 2023-02-20 221529.webm

I tried to exclude the admin from the flex objets directory but it only let me see the folder's tree.

I saw that the code changed a lot between those two versions, particularly with the scrollbars and the way the medipicker is displayed in the modal but I can't correct it myself.

[rhukster]

Can you please provide a copy of your custom blueprint that contains that mediapicker field?

[DrDroid-FR]

For the exemple in the video I simply added the code to the default YAML (edit: on a fresh GRAV + Admin)

extends@: default

form:
    fields:
        tabs:
          fields:
            advanced:
              fields:
                columns:
                  fields:
                    column1:
                       fields:
                         header.body_classes:
                           markdown: true
                           description: 'Available classes in Quark Theme (space separated):<br />`header-fixed`, `header-animated`, `header-dark`, `header-transparent`, `sticky-footer`'
                         header.file:
                            filesize: 5
                            type: mediapicker
                            destination: "self@"
                            label: Fichier
                            preview_images: true
                            accept:
                              - image/*   

[DrDroid-FR]

In the production site it's nested in a tab (but I have the exact same behavior):

title: Article
"@extends":
  type: xyz
  context: blueprints://pages

form:
  fields:
    tabs:
      type: tabs
      fields:
        content:
          fields:
...
          type: tab
          fields:
            sections:
              type: fieldset
              collapsed: false
              collapsible: false
              fields:
...
                    .picture:
                      type: fieldset
                      title: Image
                      collapsed: false
                      collapsible: true
                      fields:
                        referer:
                          type: hidden
                          default: field-selection__picture
                        .file:
                          filesize: 5
                          type: mediapicker
                          destination: "self@"
                          label: Fichier
                          preview_images: true
                          accept:
                            - image/*

[DrDroid-FR]

I corrected this issue by adding a simple overflow: scroll; to mediapicker-scroll in themes/grav/scss/template/_media.scss

    .mediapicker-scroll {
      position: absolute;
      top: 55px;
      bottom: 30px;
      height: inherit;
      overflow: scroll;
    }

See DrDroid-FR:patch-1