Decouple Documents list from search-related CSS#11605
Open
Decouple Documents list from search-related CSS#11605
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>
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>
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>
- Drop `position: absolute` from the download button at `<960px`. It was reintroduced when `.woocommerce-card__action` was renamed to `.woocommerce-table__actions`, pulling the button out of grid flow and overlapping the search input on mobile. - Revert `client/documents/list/style.scss` to develop. The mobile grid rules target `.woocommerce-search`, which is never rendered on the Documents page (no search input is wired up), so the changes had no visible effect.
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: -539 B (-0.06%) Total Size: 959 kB 📦 View Changed
ℹ️ View Unchanged
|
6 tasks
Base automatically changed from
fix/WOOPMNT-4181-transactions-search-clipped-mobile
to
develop
April 21, 2026 09:46
The `.woocommerce-report-table.has-compare, .has-search` block (mirrored
onto this stylesheet for symmetry with Transactions) is unreachable on
the Documents page, which renders neither a search input nor a compare
action. Drop the block, the now-unused `$gap`/`$gap-small` variables,
and the inert `.woocommerce-search { flex-grow: 1; }` rule. Keeps the
one rule that does apply (`.woocommerce-card__header { position: relative; }`).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
mgascam
changed the title
The Documents page never renders <Search> regardless of data state, so the has-search class falsely marked the wrapper as search-bearing and caused .woocommerce-report-table.has-search rules from client/transactions/list/style.scss to leak onto the page (with no visible effect, since the matched .woocommerce-table__actions element is empty). Remove the className so the page is truly self-contained. Snapshots updated to match. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
mgascam
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR cleans up the Documents list UI by removing an incorrect has-search class that caused search-related Transactions CSS rules to apply to the Documents TableCard, and then deleting the now-dead/unreachable Documents-specific responsive action/search styling.
Changes:
- Remove
has-searchfrom the Documents listTableCardroot class list. - Delete unused/unreachable search/compare responsive SCSS and unused variables from the Documents list stylesheet.
- Update the Documents list snapshot to reflect the className change, and add a patch-level dev changelog entry.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| client/documents/list/index.tsx | Drops has-search from the Documents TableCard className so Transactions search CSS no longer affects this page. |
| client/documents/list/style.scss | Removes dead search/compare table-action styling and unused SCSS variables; keeps the header positioning rule that’s still relevant. |
| client/documents/list/tests/snapshots/index.test.tsx.snap | Updates snapshots to match the removed has-search class. |
| changelog/fix-WOOPMNT-4181-dead-css-cleanup | Adds a patch-level dev changelog entry describing the cleanup. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mgascam
changed the title
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
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.
Summary
Follow-up cleanup to merged PR #11572. This PR decouples Documents from search-related CSS:
Drop
has-searchfrom the DocumentsTableCardclassName (client/documents/list/index.tsx:240). The page does not have a search input. With this gone, the.woocommerce-report-table.has-searchrules fromtransactions/list/style.scssno longer reach the page. Snapshot updated to match (1 className diff).Remove the dead responsive table-action block + unused vars from
client/documents/list/style.scssThe&.has-compare, &.has-search { … }block targeted UI that never renders here, so it was unreachable on this page after step 1. Also drops the now-unused$gapand$gap-smallSCSS variables and the inert standalone.woocommerce-search { flex-grow: 1; }rule. Keeps the one rule that is actually used:.woocommerce-card__header { position: relative; }.Test plan
Verified locally at 843px (mobile) and 1280px (desktop) on the Documents page in two states: empty (no records) and populated (3
vat_invoicerecords seeded viawp wcpay add_document_for_accounton the local Transact server).Screenshots