Commit c9dbfa58a97 for woocommerce
commit c9dbfa58a97b6431832c6b1100902eb232619857
Author: Darren Ethier <darren@roughsmootheng.in>
Date: Tue Mar 24 14:46:51 2026 -0400
[WOOPRD-3142] Fix buttons stacking poorly on smaller viewports on WP 7.0 (#63815)
---------
Co-authored-by: Agent Runner <agent@runner.local>
Co-authored-by: Jorge Torres <jorge.torres@automattic.com>
diff --git a/plugins/woocommerce/changelog/fix-buttons-stacking-small-viewports b/plugins/woocommerce/changelog/fix-buttons-stacking-small-viewports
new file mode 100644
index 00000000000..8454850f76a
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-buttons-stacking-small-viewports
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix order meta box action buttons stacking poorly on smaller viewports (~1200px) with WordPress 7.0.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 4631b1354f9..713a331e49c 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -9461,3 +9461,49 @@ body.woocommerce-settings-payments-section_legacy {
background: #f0f0f1;
}
}
+
+/**
+ * WP 7.0+ responsive fixes for order meta box buttons.
+ * WP 7.0 increased default button min-height from 30px to 40px,
+ * causing action button rows to wrap/stack at ~1200px viewports.
+ */
+.wc-wp-version-gte-70 {
+ @media screen and (max-width: 1200px) {
+ // Order items meta box: reduce button padding to prevent wrapping prematurely.
+ #woocommerce-order-items .wc-order-data-row {
+ .button {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+ }
+
+ // Refund action buttons: switch to flex layout so long labels wrap gracefully.
+ #woocommerce-order-items .refund-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ align-items: center;
+
+ .button,
+ .cancel-action {
+ float: none;
+ }
+
+ .button {
+ margin: 0;
+ font-size: 12px;
+ }
+
+ .cancel-action {
+ margin-right: auto;
+ order: -1;
+ }
+
+ .clear {
+ display: none;
+ }
+ }
+
+
+ }
+}