The media library looks broken on mobile

[andraganescu]

This follows up on ​https://github.com/WordPress/gutenberg/issues/32660

While testing the new Widgets editor I found that browsing the media library while using a small screen device is unuseable. Initially I thought that it's a problem of the Wdgets editor. However the bug exists in the post editor as well.

To reproduce

1. Using latest Gutenberg trunk
2. On a mobile device with a small screen (phone)
3. Create a new post
4. Add an image block
5. Click the "media library" button
6. The contents of the media library are unusable: images are small, on one column, cannot scroll

Expected behavior

I expect the modal media library to function on small screens similar to how the WP admin screen at Media > Library functions.

While testing the new Widgets editor I found that browsing the media library while using a small screen device is unusable. Initially I thought that it's a problem of the Wdgets editor. However the bug exists in the post editor as well.

To reproduce:

1. Using latest Gutenberg trunk
2. On a mobile device with a small screen (phone)
3. Create a new post
4. Add an image block
5. Click the "media library" button

Without this PR, the contents of the media library are unusable: images are small, on one column, cannot scroll.

With this PR, the contents of the media library is usable unusable: images are appropriately sized, view is scrollable.

Trac ticket: https://core.trac.wordpress.org/ticket/53679

[zieladam]

Here's a PR with a fix: ​https://github.com/WordPress/wordpress-develop/pull/1502

[mukesh27]

PR ​https://github.com/WordPress/wordpress-develop/pull/1502 working fine for me.

For CS instead of a duplicate selector can we use a parent selector?

Duplicate selector: .attachments-browser.attachments-browser .attachments-wrapper,

Parent selector: .media-frame-content .attachments-browser .attachments-wrapper,

[mukesh27]

Updated patch with parent selector

[zieladam]

@mukesh27 Sure! I dislike these double selectors as well, good call here. I just updated ​https://github.com/WordPress/wordpress-develop/pull/1502 accordingly.

[ocean90]

#53812 was marked as a duplicate.

[moch11]

Replying to SergeyBiryukov:
Dimana saya dapat mengakses Component dan milestone

[mukesh27]

#53855 was marked as a duplicate.

[peterwilsoncc]

Testing on trunk with the patch applied, I am still seeing the bug on mid-sized screens, as shown in Markup 2021-08-03 at 14.22.19.png​. There is still a little padding between the edge of the frame and the scroll bar.

This appears on both the post and widget editor's image block.

[zieladam]

@peterwilsoncc good spot! I updated the PR and I think we're good now – would you confirm?

[peterwilsoncc]

Tested on both WP trunk and 5.8 with pull request applied.

Looks good on small, medium and large screens.

Thanks for updating.

[peterwilsoncc]

In 51631:

Media: Fix layout of media library modal on narrow screens.

Reduces the right margin of the media library modal on small and medium width screens to remove excess white-space. On very narrow screens this was preventing the media icons from displaying.

Props andraganescu, desrosj, joedolson, moch11, mukesh27, sabernhardt, SergeyBiryukov, zieladam.
Fixes #53679.

[peterwilsoncc]

Reopening for merging in to 5.8 branch.

[desrosj]

In 51642:

Media: Fix layout of media library modal on narrow screens.

Reduces the right margin of the media library modal on small and medium width screens to remove excess white-space. On very narrow screens this was preventing the media icons from displaying.

Props andraganescu, desrosj, joedolson, moch11, mukesh27, sabernhardt, SergeyBiryukov, zieladam, peterwilsoncc.
Merges [51631] to the 5.8 branch.
Fixes #53679.

I'm not pursuing this work anymore so I'm closing this PR. Feel free to take over!