Commit 0dd60412148 for woocommerce
commit 0dd60412148784aa7495f2d4adf908b801bd751b
Author: Miroslav Mitev <m1r0@users.noreply.github.com>
Date: Mon Aug 24 11:41:28 2026 +0300
Fix long order origin overflowing the Order attribution metabox (#67877)
* Fix long order origin overflowing the Order attribution metabox
* Move the Order attribution details toggle to the bottom of the metabox
diff --git a/plugins/woocommerce/changelog/51602-fix-order-attribution-origin-overflow b/plugins/woocommerce/changelog/51602-fix-order-attribution-origin-overflow
new file mode 100644
index 00000000000..3bc85d7a189
--- /dev/null
+++ b/plugins/woocommerce/changelog/51602-fix-order-attribution-origin-overflow
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix a long order origin overflowing the Order attribution metabox. The origin now takes the full width of the metabox and is truncated to one line while the details are collapsed, and the details toggle has moved to the bottom of the metabox.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 44f0457efe8..79613737d57 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -9593,31 +9593,30 @@ table.bar_chart {
margin-bottom: .1em;
}
- .woocommerce-order-attribution-origin-container {
- display: flex;
- justify-content: space-between;
- align-items: start;
+ &:has(.woocommerce-order-attribution-details-toggle[aria-expanded="false"]) .order-attribution-origin {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.order-attribution-origin {
- flex-grow: 1;
- }
-
- .woocommerce-order-attribution-details-toggle {
- white-space: nowrap;
+ display: block;
+ overflow-wrap: anywhere;
}
.woocommerce-order-attribution-details-container {
display: none;
+ overflow-wrap: anywhere;
}
.woocommerce-order-attribution-details-toggle {
display: block;
+ width: fit-content;
+ margin-top: 1em;
+ white-space: nowrap;
text-decoration: none;
vertical-align: middle;
- margin-top: -7px;
position: relative;
- top: 5px;
.toggle-text {
text-decoration: underline;
diff --git a/plugins/woocommerce/templates/order/attribution-details.php b/plugins/woocommerce/templates/order/attribution-details.php
index ac514488ce2..fcd7cf674be 100644
--- a/plugins/woocommerce/templates/order/attribution-details.php
+++ b/plugins/woocommerce/templates/order/attribution-details.php
@@ -6,7 +6,7 @@
*
* @see Automattic\WooCommerce\Internal\Orders\OrderAttributionController
* @package WooCommerce\Templates
- * @version 10.3.0
+ * @version 11.2.0
*/
declare( strict_types=1 );
@@ -35,15 +35,6 @@ defined( 'ABSPATH' ) || exit;
</span>
<?php endif; ?>
- <?php if ( $has_more_details ) : ?>
-
- <a href="" class="woocommerce-order-attribution-details-toggle" aria-expanded="false">
- <span class="toggle-text show"><?php esc_html_e( 'Show details', 'woocommerce' ); ?></span>
- <span class="toggle-text hide" aria-hidden="true"><?php esc_html_e( 'Hide details', 'woocommerce' ); ?></span>
- <span class="toggle-indicator" aria-hidden="true"></span>
- </a>
- <?php endif; ?>
-
</div>
<div class="woocommerce-order-attribution-details-container closed">
@@ -162,6 +153,15 @@ defined( 'ABSPATH' ) || exit;
<?php echo esc_html( $meta['session_pages'] ); ?>
</span>
<?php endif; ?>
+
+ <?php if ( $has_more_details ) : ?>
+ <a href="" class="woocommerce-order-attribution-details-toggle" aria-expanded="false">
+ <span class="toggle-text show"><?php esc_html_e( 'Show details', 'woocommerce' ); ?></span>
+ <span class="toggle-text hide" aria-hidden="true"><?php esc_html_e( 'Hide details', 'woocommerce' ); ?></span>
+ <span class="toggle-indicator" aria-hidden="true"></span>
+ </a>
+ <?php endif; ?>
+
<!-- A placeholder for the OA install banner React component. -->
<?php if ( class_exists( 'WC_Marketplace_Suggestions' ) && \WC_Marketplace_Suggestions::allow_suggestions() ) : ?>
<div id="order-attribution-install-banner-slotfill"></div>