Modal blocks half of file input

Problem/Motivation

When you use the 'Add media' button to open the media library in a module, the input to upload a file is focussed. This scrolls that element to the top of the modal, but the label and half the file input are covered by the modal title bar.

I've tested this on Claro and Gin and a custom (non-admin) theme on both Firefox and Chrome and I get the same results each time.

See screenshot:

Steps to reproduce

Set a media field to use the media library formatter
Choose 'Add media' on a media field.
Check that the file input gets selected and is slightly obscured by the modal title

1. Add field media to a content type
2. Edit content type on field media
3. Upload at least 5 media items (to make sure grid has at least 2 rows)
4. Close modal field media
5. Edit field media again
6. Check that the file input gets selected and is slightly obscured by the modal title

Proposed resolution

I'm not sure of the resolution. I think something like adding scroll-margin-block-start as an inline style when the ajax is called might solve it.This approach was tried but does not solve the problem.

Added a js behaviour to scroll up on field media modal open. <-- this approach need to be confirmed

Remaining tasks

Confirm approach, Code Review & Test.

User interface changes

Changes the behaviour improving UX.

Introduced terminology

None

API changes

None

Data model changes

None

Release notes snippet

None