Commit a1caf7b9200 for woocommerce
commit a1caf7b92009f54c623b753d4a843a2ec5ec4479
Author: Vlad Olaru <vlad.olaru@automattic.com>
Date: Tue Sep 8 09:04:58 2026 +0300
Fix variation attribute selectors truncating long values in the header (#68434)
* Fix variation attribute selectors truncating long values in the header
The classic product editor caps every select in a metabox heading at 20%
of the heading width. In the variations list this clips attribute values
such as licence tiers to a few characters, so merchants cannot tell
variations apart without expanding each row.
Let the built-in attribute selectors size to their content, bounded by
the available heading width and by 25rem, the ceiling WordPress core
already applies to admin selects. At 782px and below each selector
fills its own row so stacked fields share an aligned edge. Other
metabox heading selects keep the generic cap.
* Add changelog entry for variation attribute selector widths
diff --git a/plugins/woocommerce/changelog/fix-variation-attribute-header-width b/plugins/woocommerce/changelog/fix-variation-attribute-header-width
new file mode 100644
index 00000000000..2b4cea6113a
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-variation-attribute-header-width
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Allow variation attribute selectors to use available header space and wrap on narrow screens.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 0add48b10fc..435ba0578eb 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -6758,6 +6758,16 @@ img.help_tip {
}
&.woocommerce_variation h3 {
+ > select[name^="attribute_"] {
+ max-width: min(100%, 25rem);
+ margin-inline: 0;
+
+ @media only screen and (max-width: 782px) {
+ width: 100%;
+ max-width: 100%;
+ }
+ }
+
a.delete,
a.edit,
.sort {