Skip to content

[Backport to release/10.6] [WOOPRD-3142] Fix buttons stacking poorly on smaller viewports on WP 7.0#63836

Merged
jorgeatorres merged 1 commit intorelease/10.6from
cherry-pick-PR63815-to-release/10.6
Mar 24, 2026
Merged

[Backport to release/10.6] [WOOPRD-3142] Fix buttons stacking poorly on smaller viewports on WP 7.0#63836
jorgeatorres merged 1 commit intorelease/10.6from
cherry-pick-PR63815-to-release/10.6

Conversation

@woocommercebot
Copy link
Copy Markdown
Collaborator

@woocommercebot woocommercebot commented Mar 24, 2026

This PR is a cherry-pick of #63815 to release/10.6.

Original PR Description

Submission Review Guidelines:

Changes proposed in this Pull Request:

WordPress 7.0 increased default button min-height from 30px to 40px. This causes action button rows in the single order view to wrap/stack at ~1200px viewport widths, where they previously fit on a single line.

This PR adds responsive CSS rules scoped under the .wc-wp-version-gte-70 body class to fix premature button wrapping in:

  • Order Items meta box (.add-items): "Add item(s)", "Apply coupon", "Refund", "Recalculate" buttons
  • Refund actions (.refund-actions): "Refund via [gateway]", "Refund manually", "Cancel" buttons
  • Order Actions meta box (#actions): select dropdown + apply button

At viewports ≤1280px, the fix:

  • Reduces button min-height, padding, and font-size to prevent premature wrapping
  • Switches .add-items and .refund-actions from float-based to flexbox layout with flex-wrap and gap for graceful degradation

Also adds the wc-wp-version-gte-70 body class detection in class-wc-admin.php (same pattern used by PR #63779).

Closes WOOPRD-3142
Part of WOOPRD-3138 (Single Order View — WP 7.0 Visual Regressions)

How to test the changes in this Pull Request:

  1. Set up a store running WordPress 7.0 (beta or later)
  2. Create an order with at least one line item
  3. Navigate to WooCommerce → Orders → Edit the order
  4. Resize your browser window to ~1200px width
  5. Verify the "Add item(s)", "Apply coupon", and "Refund" buttons in the Order Items meta box remain on a single line (or wrap gracefully with proper spacing)
  6. Click "Refund" and verify the refund action buttons also display properly
  7. Check the Order Actions meta box (select + apply button) fits without overflow
  8. Resize to 1024px and 768px — verify layout still degrades gracefully
  9. Downgrade to WordPress 6.9 and verify no visual changes (CSS is scoped to WP 7.0+)

Testing that has already taken place:

  • SCSS compilation verified (no errors)
  • PHP linting (PHPCS) passed with no new warnings
  • PHPStan static analysis passed with no errors
  • Branch-level lint passed
  • Playwright E2E test added (verifies button bounding boxes stay within container at 1200px viewport)
  • Visual verification pending WP 7.0 availability

Milestone

Note: Check the box above to have the milestone automatically assigned when merged.

Changelog entry

  • This Pull Request does not require a changelog entry. (Comment required below)
Changelog Entry Comment

Comment

Changelog entry was created manually in plugins/woocommerce/changelog/fix-buttons-stacking-small-viewports.

@nerrad @jorgeatorres @woocommercebot
[WOOPRD-3142] Fix buttons stacking poorly on smaller viewports on WP …
fdc33a0 
…7.0 (#63815)

---------

Co-authored-by: Agent Runner <agent@runner.local>
Co-authored-by: Jorge Torres <jorge.torres@automattic.com>
@github-actions github-actions bot added this to the 10.6.0 milestone Mar 24, 2026
@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Mar 24, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 24, 2026

Testing Guidelines

Hi @jorgeatorres @nerrad ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

  • 🖼️ Screenshots or screen recordings.
  • 📝 List of functionality tested / steps followed.
  • 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
  • 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

@woocommercebot woocommercebot mentioned this pull request Mar 24, 2026
Merged
2 tasks
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 24, 2026

Size Change: +225 B (0%)

Total Size: 5.97 MB

Filename Size Change
./plugins/woocommerce/client/legacy/build/css/admin-rtl.css 39.4 kB +112 B (+0.28%)
./plugins/woocommerce/client/legacy/build/css/admin.css 39.4 kB +113 B (+0.29%)

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 24, 2026

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

@jorgeatorres jorgeatorres enabled auto-merge (squash) March 24, 2026 18:55
@jorgeatorres jorgeatorres merged commit 790e8e9 into release/10.6 Mar 24, 2026
34 of 36 checks passed
@jorgeatorres jorgeatorres deleted the cherry-pick-PR63815-to-release/10.6 branch March 24, 2026 19:02
@github-actions github-actions bot added metric: feature freeze exception A tracking label for PRs that were merged after the feature freeze. needs: documentation The issue/PR requires documentation to be added. labels Mar 24, 2026
@github-actions github-actions bot mentioned this pull request Mar 31, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jorgeatorres jorgeatorres jorgeatorres approved these changes

@nerrad nerrad Awaiting requested review from nerrad

Assignees

@jorgeatorres jorgeatorres

@nerrad nerrad

Labels

metric: feature freeze exception A tracking label for PRs that were merged after the feature freeze. needs: documentation The issue/PR requires documentation to be added. plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

10.6.0

Development

Successfully merging this pull request may close these issues.

3 participants

@woocommercebot @jorgeatorres @nerrad