Fix transactions search box placeholder text clipped on mobile#11572
Open
bruberries wants to merge 5 commits intodevelopfrom
Open
Fix transactions search box placeholder text clipped on mobile#11572bruberries wants to merge 5 commits intodevelopfrom
bruberries wants to merge 5 commits intodevelopfrom
Conversation
The mobile breakpoint (<960px) for the search box only cleared margin-left but not margin-right, leaving 16px of right margin that constrained the input width and clipped the placeholder text. Fixes #9078 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
bruberries
requested review from
a team,
Luc45,
mgascam and
zhongruige
and removed request for
a team
Contributor
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
Contributor
|
Size Change: +2 B (0%) Total Size: 963 kB
ℹ️ View Unchanged
|
mgascam
requested changes
Apr 10, 2026
Contributor
mgascam
left a comment
mgascam
left a comment
There was a problem hiding this comment.
Thanks for working on this fix @bruberries!
I I tested this on a JN site with the PR branch deployed and the fix doesn't appear to take effect. After investigating, here's what I found:
The mobile breakpoint rules in this file are all scoped inside .woocommerce-card__action, but WooCommerce's TableCard component (@woocommerce/components v12.3.0) now renders .woocommerce-table__actions
instead. You can verify this on any Transactions page:
document.querySelectorAll('.woocommerce-card__action').length // → 0
document.querySelectorAll('.woocommerce-table__actions').length // → 1
Suggested fix:
I think we need to replace .woocommerce-card__action with .woocommerce-table__actions in this file (and also in client/documents/list/style.scss and client/components/download-button/style.scss which have the same stale
selector). That would revive all the mobile breakpoint styles and properly fix the placeholder clipping.
Replace .woocommerce-card__action with .woocommerce-table__actions across transactions, documents, and download-button styles so the mobile breakpoint rules actually apply. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
mgascam
reviewed
Apr 14, 2026
Contributor
mgascam
left a comment
mgascam
left a comment
There was a problem hiding this comment.
Thanks for the quick turnaround, @bruberries! I tested this locally and the search box ends up a bit cramped on mobile viewports — a couple of the revived grid rules don't quite match the current TableCard DOM, so the column collapses and the search box gets pushed to the right instead of filling the row.
The revived grid rules had two issues causing the search box to be cramped on mobile: grid-template-columns used auto (content-sized) instead of 1fr (full-width), and grid-area referenced 3 implicit zero-width columns instead of the single defined column. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Author
|
Hi @mgascam, thanks for catching the cramped layout! The issue was that the mobile grid rules (now active after the selector fix) had two problems:
Also fixed Could you test again when you get a chance? |
mgascam
reviewed
Apr 16, 2026
Contributor
mgascam
left a comment
mgascam
left a comment
There was a problem hiding this comment.
Thanks for addressing my comments @bruberries! The search box width is much better now. I did spot one more issue while testing on mobile: the download button overlaps the search input (screenshot below). I think this is related to some of the other revived rules in download-button/style.scss that force position: absolute on the button at <960px.
I'm still thinking through the cleanest fix for this. I want to make sure we don't regress any other pages that use these shared styles. I'll follow up soon with a concrete suggestion. No action needed on your end for now.
Thanks again for your patience 🙏
Author
|
@mgascam Thank you for bearing with me! |
3 tasks
mgascam
reviewed
Apr 17, 2026
Contributor
mgascam
left a comment
mgascam
left a comment
There was a problem hiding this comment.
Hey @bruberries I have a plan to move forward with this fix. Please check my comment with the suggestion to address the download button issue.
I'm also working on a draft (#11605) to do a bit of cleanup, but I'm happy to handle that as a follow-up to this PR.
How does it sound?
Contributor
There was a problem hiding this comment.
Suggest dropping this line to fix the download-button overlap on mobile I mentioned earlier. The rest of the block (grid-area, justify-self, margin) places the button correctly at row 1 col 2 right-aligned — position: absolute is what pulls it out of grid flow and causes it to overlap the search input at <960px.
Suggested change
Keeps the button in the grid flow at <960px so it no longer overlaps the search input.
mgascam
approved these changes
Apr 17, 2026
Contributor
mgascam
left a comment
mgascam
left a comment
There was a problem hiding this comment.
Thanks @bruberries! 
The search box now fills the width and the download button is right-aligned inline instead of overlapping. Sharing screenshots for comparison.
Tablet - 768px
Before
After
Mobile L - 425px
Before
After
Mobile S - 320px
Before
After
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #9078
Changes proposed in this Pull Request
On mobile viewports (<960px), the Transactions page search box placeholder text ("Search by order number, customer name, or billing email") is clipped because the mobile CSS breakpoint only clears
margin-leftbut notmargin-right, leaving a 16px right margin that constrains the input width.This PR changes
margin-left: 0tomargin: 0in the mobile breakpoint for.woocommerce-searchinside.has-search:not(.has-compare), clearing all margins so the search box takes full available width.Testing instructions
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge