feat(ui): make media library responsive

[delucis]

Summary

Closes #7241

This PR makes the media library modal and contents responsive for small screens.

My ultimate goal would be to continue more work towards making the UI responsive in the vein of #7298, but seeing how that large PR stalled, I think it might be better to do this in small pieces, so this focuses only on the media library. It has some design choices in common with #7298, but diverges in other places. I mainly focused on limiting changes to styling as much as possible.

Decisions:

• On narrowest viewports (<500px), let the modal cover more of the screen in a “bottom sheet” style to maximise the space available inside the modal. In this layout the close button moves to top right within the modal.
• Make the modal header more fluid: the layout now makes the most of flexbox to let the UI elements reflow as needed. With English UI strings this works OK even for a viewport as narrow as 170px.
• On narrow viewports (<800px), use icons for the copy and download buttons to take up less space. This is particularly helpful for the copy button which can change in size depending on library state (e.g. switching between “Copy” and “Copy Path” in English). On larger screens this isn’t too problematic, but at small widths, changes in text quickly result in layout shift. The icons avoid this while also saving space. Given copy/download are less important functionality, this seemed like a good compromise to me.
• For viewports ≥800px, there should be no noticeable change for users.

There is still some more underlying work to do to avoid overflow and include the correct meta viewport tags to make this work as discussed in #7298, but I think this work can be done incrementally.

Examples

Here are some examples showing the main media library and the image picker inside a post in the dev project:

350px	500px	800px

Test plan

I’ve tested extensively locally, existing tests should pass as no new functionality was added, only styling improvements.

Checklist

Please add a x inside each checkbox:

• I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)

[yanthomasdev]

I think it might be better to do this in small pieces

I agree! Definitely helps reviewing vs. a lot of styling changes at one time.

I tested the changes here by adding a meta viewport and they worked great, thanks @delucis