Media Library Search Field Obscured by Plugin Fields

[kuba799]

I'm trying to add an image to my web page, and in the library is search bar not visible. When I looked into the HTML code of the media library popup, I figured out that the plugin filter tools have higer priority than search bar. Also the <div> with the tools is set to certain height. So technically there *is* search bar, but it's not visible (and thats not good when i try to search in +6000 images).
Can you please fix this?

Thank you very much,
Jakub J. Zeleny

[kuba799]

screenshot of "hidden" search bar in media library popup

[joedolson]

You clearly have a plugin active that's altering the media gallery; can you confirm that this is still happening when that plugin is disabled?

[kuba799]

Hello,
it seems fixed now, i have the plugins still on and the search bar is showing again.
Thank you, JJZ

[maulikmakwana2008]

This patch fixes a UI issue where the Media Library search field becomes hidden when plugins add custom filter tools to the Media Modal toolbar.

The problem occurs because .media-toolbar and .media-frame-toolbar have fixed or constrained heights, causing the search bar to overflow outside the visible area.

This patch:

• allows the toolbar to auto-expand (height: auto)

• enables wrapping of toolbar elements (flex-wrap: wrap)

• ensures no clipping (overflow: visible)

The solution is fully backward-compatible and does not affect existing plugin integrations. No structural changes to the Media Modal were required.

[joedolson]

This has been improved somewhat in 7.0, by allowing the filter container to be scrollable. But that's a fairly minimal improvement. I don't think the current patch is taking mobile viewports into consideration, so I think it'll need a bit more work.

When a plugin adds extra filters to the media modal toolbar, the toolbar's fixed height causes it to scroll and the search field can scroll out of view — leaving no visible way to search a large library.

What the problem was:

• The modal toolbar (.media-toolbar) has a fixed height with overflow: auto.
• Extra plugin filters in .media-toolbar-secondary make the toolbar scroll.
• The search field (.media-toolbar-primary) scrolls away with it and becomes obscured, as reported.

What the fix does:

• Pins the search field to the top of the scrollable toolbar with position: sticky; top: 0, scoped to the media modal.
• The filters remain scrollable; the search field stays in view.

Approach and why:

• Deliberately leaves the toolbar height and the content top-offsets unchanged, so it behaves consistently across viewport sizes. This addresses the earlier patch's issue of not accounting for mobile viewports (per Trac comment #5).
• Scoped to .media-modal so the standalone media grid screen is unaffected, matching the ticket's scope (the modal, not the media screen).
• Change is monotonic: sticky positioning only takes effect when the toolbar actually overflows, so the default layout is unchanged.

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

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Ticket analysis and empirical verification of the fix. All changes were reviewed and verified by me.

[adrianduffell]

This could possibly still make it into 7.1 as a bug fix during the current beta period.

Which filter is best for testing this?

[afercia]

Which filter is best for testing this?

@adrianduffell I believe the plugin that extends the media library modal dialog illustrated in the screenshot in this ticket is "Folders", see ​https://wordpress.org/plugins/folders/

Can be downloaded, tested and also 'Live previewed' from the .org plugin repository page. Any plugin that adds controls within the media dialog toolbar will likely break the layout.

To my understanding:

• The recently added scrolling behavior slightly improved things but it's less than ideal.
• More importantly, I believe the newly added CSS grid layout of the toolbar doesn't really take into account additional form elements added by plugins. It is important that contributors remember the Media Library is extendable. Plugins can add their own stuff. Using a CSS grid that only takes into account the controls rendered by Core doesn't seem to be a great choice. I think the CSS grid layout should be removed in favor of another layout that allows unknown additional content to flow more naturally.

[afercia]

Testing the Folders plugin on Playground

[joedolson]

Moving to 7.2. We haven't managed to put any time on this, and RC is next week. It's not realistic to keep this in the milestone.

[joedolson]

On further discussion, @afercia is interested in working on this, so we'll keep trying.

[r1k0]

I tried to reproduce the bug on Playground, but I wasn't able to. The search field is visible unless you scroll down the media toolbar. As shown in @afercia's screencast.

The only issue is that the dropdown boxes get a bit squeezed on my screen and the distance between the dropdown boxes and their labels.

I also tested the latest patch and it fixes the issue of the search bar going out of view when you scroll down. But from the last comment, there is still more work to be done for this issue.

[joedolson]

Ran out of time, so punting this to 7.2.