Commit 63ef31d6ec4 for woocommerce

commit 63ef31d6ec47bc1918af73342cc7e0ed2399fd7d
Author: Jana Hernandez <71137829+JanaMW27@users.noreply.github.com>
Date:   Mon Aug 17 13:51:34 2026 +0200

    Fix long product name overflow in the order Add products modal (#67183)

diff --git a/plugins/woocommerce/changelog/67114-fix-modal-select2-padding-wp70 b/plugins/woocommerce/changelog/67114-fix-modal-select2-padding-wp70
new file mode 100644
index 00000000000..c1f111f54fe
--- /dev/null
+++ b/plugins/woocommerce/changelog/67114-fix-modal-select2-padding-wp70
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix long product names in the Add products modal running under the clear/chevron icons on WP 7.0+ and stretching the table past the modal edge.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 94a9fcc0612..0be182e8d0a 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -8047,18 +8047,32 @@ table.bar_chart {
 		min-height: 180px
 	}

+	// Fixed layout so a long nowrap select2 selection truncates inside the Product
+	// column instead of stretching it and pushing Quantity past the modal edge.
+	&.wc-backbone-modal-add-products table.widefat {
+		table-layout: fixed;
+
+		th:last-child {
+			width: 100px;
+		}
+	}
+
 	.select2-container {
 		width: 100% !important;
 	}

-	// Reserve room for the clear (x) and chevron icons; .select2-container keeps this rule above the later global 24px padding.
-	.select2-container .select2-selection--single {
+	// Reserve room for the clear (x) and chevron icons; .wc-backbone-modal-content lifts specificity
+	// to 0,5,0 so the later, equal-specificity WP 7.0 reset (`.wc-wp-version-gte-70 ... padding: 0 12px`)
+	// no longer wins the right padding.
+	.wc-backbone-modal-content .select2-container .select2-selection--single {
 		.select2-selection__rendered {
 			padding-right: 40px;
 		}

+		// Pull the clear (x) into the 40px padding zone so it sits beside the chevron
+		// rather than at the text edge.
 		.select2-selection__clear {
-			margin-right: 18px;
+			margin-right: -10px;
 		}
 	}
 }
diff --git a/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-items.php b/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-items.php
index e99366440bd..13c41f439ea 100644
--- a/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-items.php
+++ b/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-items.php
@@ -417,7 +417,7 @@ if ( wc_tax_enabled() ) {
 <?php endif; ?>

 <script type="text/template" id="tmpl-wc-modal-add-products">
-	<div class="wc-backbone-modal">
+	<div class="wc-backbone-modal wc-backbone-modal-add-products">
 		<div class="wc-backbone-modal-content">
 			<section class="wc-backbone-modal-main" role="main">
 				<header class="wc-backbone-modal-header">