Changeset 62955

Timestamp:

07/31/2026 12:18:25 PM (11 days ago)

Author:

tyxla

Message:

Media: Fix media modal positioning and spacing on mobile with infinite scroll.

On small screens, the attachment grid in the media modal collapsed to a single
narrow column when infinite scrolling was enabled. The responsive rules for
size and position of attachments grid, toolbar, and wrapper did not account for
the taller media toolbar present when the "load more" button is absent.

Add a .attachments-browser:not(.has-load-more) selector to the affected mobile
breakpoints and adjust the toolbar height and grid offset so the attachment grid
fills the modal width and displays multiple items per row, matching the layout
used when infinite scroll is disabled.

Props tyxla, mukesh27, joedolson.

See https://core.trac.wordpress.org/ticket/65564.

File:

• trunk/src/wp-includes/css/media-views.css (modified) (3 diffs)

trunk/src/wp-includes/css/media-views.css

@@ -2636 +2636 @@
 
         .attachments-browser .attachments,
+        .attachments-browser:not(.has-load-more) .attachments,
         .attachments-browser .uploader-inline,
         .attachments-browser .media-toolbar,
@@ -2644 +2645 @@
 
         .attachments-browser .media-toolbar {
-                height: 74px;
+                height: 117px;
         }
 
         .attachments-browser .attachments,
+        .attachments-browser:not(.has-load-more) .attachments,
         .attachments-browser .uploader-inline,
         .media-frame-content .attachments-browser .attachments-wrapper {
-                top: 90px;
+                top: 131px;
         }
 
@@ -2957 +2959 @@
 
         .attachments-browser .attachments,
+        .attachments-browser:not(.has-load-more) .attachments,
         .attachments-browser .uploader-inline,
         .attachments-browser .media-toolbar,