Modal blocks half of file input

MR Raised

Please check the pipeline before review.

Also this seems like a CSS bug no?

I've updated the JS removing forEach and making sure it scrolls just the modal (on my vanilla setup it was scrolling the document root too)

Drupal.behaviors.mediaLibraryScrollOnOpen = {
    attach: function (context, settings) {
      const input = once('mediaLibraryScrollOnOpen', 'input[type="file"]', context)[0];
      if (input) {
        const modalContent = input.closest('#drupal-modal');
        if (modalContent) {
          setTimeout(() => {
            modalContent.scrollTo({
              top: modalContent.offsetTop  - modalContent.scrollTop,
              behavior: 'smooth',
            });
          }, 100);
        }
      }
    }
  };

As I've investigated, the issue lies on jQuery adding max-height on #drupal-modal.ui-front ui-dialog-content ui-widget-content when it actually should add this property to .media-library-wrapper I couldn't find yet how we can tweak the jQuery

If anyone could Shed a light I'll be thankful :)

hello, I have checked this issue on Drupal 11, in Claro and Gin theme. I am able to replicate it.
Tested the MR , and the issue get resolved ie able to see the file input on click of Add media field in a content type, the popup gets opened and the scroll is up at the top of the modal. In terms of UX, may be this can still be improved, but it is fixing the issue of file input getting cut off.

I have added before and after screenshots for reference.

appears to need rebase

If you are another contributor eager to jump in, please allow the previous poster(s) at least 48 hours to respond to feedback first, so they have the opportunity to finish what they started!

Hi @smustgrave I've rebased to last 11.x version

I have tested the patch and it’s working as expected. When using the 'Add media' button to open the media library, the file input is now correctly positioned and fully visible.

Tested on:

Themes: Claro, Olivero, Gin, and a custom (non-admin) theme

Browsers: Firefox and Chrome

Thanks!