![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#65296 closed defect (bug) (fixed)
Library section under Media, search bar shifts position after searching in the WordPress admin area.
| Reported by: | abduremon | Owned by: | joedolson |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.0.1 |
| Component: | Administration | Version: | 7.0 |
| Severity: | major | Keywords: | has-screenshots has-patch has-test-info dev-reviewed |
| Cc: | Focuses: | ui, administration |
Description
## Issue
After installing WordPress, the search bar in the Library under Media tab section shifts position after performing a search in the admin area.
## Reproduction Steps
- Log into the WordPress admin dashboard.
- Go to Media → Library.
- Search for any media item using the search bar.
- Observed Result.
## Observed Result
After searching, the search bar jumps/shifts unexpectedly in the Library section UI.
## Expected Result
The search bar should remain stable and properly aligned after performing a search.
Attachments (2)
Change History (18)
@
8 weeks ago
The search bar position also shifts when using Grid View after selecting a media item and applying a date filter.
#1
@
8 weeks ago
The search bar position also shifts when using Grid View after selecting a media item and applying a date filter.
Already uploaded another attachment.
This ticket was mentioned in PR #11937 on WordPress/wordpress-develop by @mohamedahamed.
8 weeks ago
#3
- Keywords has-patch added
## Summary
Fixes an issue where the search bar in the Media Library (Admin grid view) shifts/jumps horizontally (moves to the left and then snaps back) when typing/removing text in the search input or applying a date filter.
### Root Cause
During search/filtering updates, the Backbone.js view shows/hides the loading spinner and an overlay element (.media-bg-overlay) to block interaction and display the loading state.
However, .media-bg-overlay was only styled within the @media screen and (max-width: 782px) media query in media-views.css. On screens wider than 782px (desktop), the element had no style definitions. Consequently, when jQuery called .show(), the overlay was displayed as a default block element (display: block) in the normal document flow. Because it sits inside the .media-toolbar container, its insertion disrupted the floated and flex layout of .media-toolbar-primary (containing the search input) and .media-toolbar-secondary, causing the layout elements to shift.
### Solution
- Defined
.media-bg-overlayglobally (outside of media queries) with absolute positioning. This takes the overlay out of the document flow on all screen sizes, preventing any layout reflow/shift.
## Changes
### src/wp-includes/css/media-views.css
- Moved
.media-bg-overlaylayout definition to a global rule so it is always absolutely positioned and overlaying the toolbar correctly on both desktop and mobile views.
## Testing
| Test Case | Expected / Result | Status |
|---|---|---|
| Typing search queries in Media Library Grid View | Search bar remains stable, no horizontal shift | ✅ Passed |
| Selecting media item and applying a Date filter | Grid layout remains stable, no horizontal shift | ✅ Passed |
Trac ticket: https://core.trac.wordpress.org/ticket/65296
## Use of AI Tools
AI assistance: No
#4
@
8 weeks ago
- Milestone Awaiting Review → 7.0.1
I believe this issue is a regression caused by the following style added by r61645.
.upload-php .wp-filter { display: flex; }
When performing a filter search, display: block is applied to the overlay, which seems to cause unintended issues with flex layouts.
<div class="media-toolbar wp-filter"> <!-- `display: flex` is applied -->
<div class="media-toolbar-secondary">
</div>
<div class="media-toolbar-primary search-form">
</div>
<div class="media-bg-overlay" style="display: none;"></div> <!-- `display:block` is dynamically applied here during filter search -->
</div>
@mohamedahamed commented on PR #11937:
7 weeks ago
#5
@t-hamano Have made the changes!
#6
@
7 weeks ago
PR #11937 looks good to me for commit.
#7
@
7 weeks ago
Patch testing report
Patch / PR tested
- https://github.com/WordPress/wordpress-develop/pull/11937
- trunk @ ac539ca198 with PR diff applied
Environment
- WordPress: 7.1-alpha-62161-src
- PHP: latest (Docker)
- MySQL: 8.4
- OS: macOS 26.3.1
- Browser: Chromium, desktop viewport (>782px)
- Local wordpress-develop @ http://localhost:8889
Steps
# Log in to wp-admin.
# Open Media → Library in Grid view (/wp-admin/upload.php?mode=grid).
# Use a desktop-width window (>782px).
# Type and delete text in the Search media field.
# Change the date filter (e.g. All dates → May 2026).
# Clear search and repeat.
Results
- Typing in search (grid view): pass — no horizontal toolbar shift observed.
- Date filter change: pass — toolbar/search bar position stable during refresh.
- Clearing search: pass — no layout jump.
Conclusion
PR #11937 fixes the reported layout shift on desktop. Recommend commit.
#9
@
7 weeks ago
Patch tested:
https://github.com/WordPress/wordpress-develop/pull/11937
Environment
- WordPress: 7.1-alpha-62161-src
- PHP: Latest
- MySQL: 8.4
- OS: Windows
- Browser: Chrome
- Viewport: Desktop (>782px)
Test Procedure
# Sign in to the WordPress admin area.
# Navigate to Media → Library using Grid mode (/wp-admin/upload.php?mode=grid).
# Ensure the browser width remains above 782px.
# Enter text into the “Search media” input and then remove it.
# Switch the media date dropdown to another month/year option.
# Repeat the search and clear actions multiple times.
Observed Results
- Search interactions in Grid view remained visually stable with no horizontal movement in the toolbar area.
- Changing the date filter refreshed correctly without causing the search controls to shift position.
- Removing the search term did not trigger any noticeable layout jump.
Final Notes
The proposed patch successfully resolves the desktop layout shift issue reported in the ticket. Tested successfully and appears ready for commit.
#13
@
6 weeks ago
- Keywords dev-feedback added
- Resolution fixed
- Status closed → reopened
Reopening for backport to 7.0 branch.
Library section search bar shifts position after searching in WordPress admin area.