Opened 4 weeks ago
Last modified 3 weeks ago
#66092 new defect (bug)
Add 8px gap between Media Library search field and button on mobile/tablet
| Reported by: | deeppatel8950 | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | Media | Version: | 7.1 |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: | ui, css |
Description
The Media Library search form does not maintain consistent spacing between the search input field and the Search Media button on certain mobile and tablet screen sizes.
On desktop, the search field and button are displayed correctly with appropriate spacing. However, at smaller responsive breakpoints, the spacing between these elements is missing.
Expected Behavior:
An 8px horizontal gap should be maintained between the search input field and the Search Media button on mobile and tablet screen sizes.
Required Change:
The current column-gap between the Media Library search input and the Search Media button is 0. Please update the column-gap from 0 to 8px at the applicable mobile/tablet breakpoint.
Attachments (5)
Change History (6)
This ticket was mentioned in PR #13518 on WordPress/wordpress-develop by @rockscoder.
3 weeks ago
#1
- Keywords has-patch added
### Description
On mobile and tablet viewports (<= 1000px), \.wp-filter p.search-box\ in \src/wp-admin/css/media.css\ set \column-gap: 0;\, which removed the default 8px (\
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Added an 8px column gap between the Media Library search input and Search Media button at the affected responsive breakpoint. Tested the spacing on mobile and tablet viewport sizes