Commit 45c26228688 for woocommerce
commit 45c26228688c210a605ed731f18ad3dd8f1eff02
Author: Filipe Varela <keoshi@keoshi.com>
Date: Fri Oct 16 07:02:19 2026 +0100
Keep the "+N more" badge on the same line to even out Analytics rows (#67765)
* Keep the "+N more" badge on the same line as the first item
In Analytics report tables, renderList() returned the first item's link and
the ViewMoreList badge as adjacent fragment children. In a narrow Products
column the badge cannot fit beside the text, so it wraps onto its own line
and adds a full button's height. Rows carrying a badge measured 105.41px
against 87.11px for rows without one, and 232.83px once the product name was
long.
Wrap both in a scoped inline-flex container with no-wrap, so they stay on one
line and every row matches. This lives in the Orders report rather than the
shared Tag component, so no other consumer of Tag is affected.
The trade-off is horizontal: the Products cell now claims its natural width
instead of wrapping, which widens the column and pushes the table into its
existing horizontal scroll. Documented in the pull request for review.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Add changelog entry for Analytics row height fix
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Bound the Products cell with min/max-width instead of nowrap
Per @chihsuan's review: white-space: nowrap made the cell claim its full
natural width, which is what pushed the table into a much wider horizontal
scroll. Flex alone already keeps the badge from wrapping onto its own
line, so nowrap wasn't needed for that - it was only there to stop the
name itself from wrapping, which isn't actually a problem.
Replace it with a max-width cap and a min-width floor scoped to rows that
carry a badge, and let the name wrap normally again. Drop the gap too,
since ViewMoreList already carries its own 4px margin + 4px padding.
Measured on the same three test rows: typical names are unaffected
(87.6px, unchanged), and table overflow for a deliberately extreme
82-character product name drops from 522px to 80px.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Bound the product link itself, and let long names break anywhere
The previous commit put the min-width on the flex wrapper, so the badge's
fixed 68px came out of the name's share and the name was squeezed toward
nothing before the wrapper hit its floor. Moving min-width onto the link
gives the name its own floor and lets the badge take its width on top.
A name with no spaces has a min-content width of the whole name, which set
the column's floor and pushed the Products column to ~647px. overflow-wrap:
anywhere lets it break mid-word inside the bounds instead.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GFngCNDJHR4bv8NeNBn5uH
* Only wrap list cells that show a "+N more" badge
Cells with a single product or coupon go back to rendering the bare link,
so the table's a:only-child rule still stretches it across the cell, and
overflow-wrap: anywhere no longer splits single coupon codes mid-word.
---------
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
diff --git a/plugins/woocommerce/changelog/fix-37999-analytics-row-height-view-more-badge b/plugins/woocommerce/changelog/fix-37999-analytics-row-height-view-more-badge
new file mode 100644
index 00000000000..13fc1a8a7b4
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-37999-analytics-row-height-view-more-badge
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Keep a cell's first item on the same line as its "+N more" badge in Analytics report tables, so rows carrying a badge are no longer taller than rows without one.
diff --git a/plugins/woocommerce/client/admin/client/analytics/report/orders/table.js b/plugins/woocommerce/client/admin/client/analytics/report/orders/table.js
index 331a27543d6..87f4971dccb 100644
--- a/plugins/woocommerce/client/admin/client/analytics/report/orders/table.js
+++ b/plugins/woocommerce/client/admin/client/analytics/report/orders/table.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { map } from 'lodash';
import { Date, Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
import { formatValue } from '@woocommerce/number';
@@ -315,13 +315,17 @@ class OrdersReportTable extends Component {
}
renderList( visibleItems, popoverItems ) {
+ const links = this.renderLinks( visibleItems );
+ // Without a badge, keep the link as the cell's only child so the table's
+ // `a:only-child` rule still stretches it across the cell.
+ if ( popoverItems.length <= 1 ) {
+ return links;
+ }
return (
- <Fragment>
- { this.renderLinks( visibleItems ) }
- { popoverItems.length > 1 && (
- <ViewMoreList items={ this.renderLinks( popoverItems ) } />
- ) }
- </Fragment>
+ <div className="woocommerce-analytics__inline-list">
+ { links }
+ <ViewMoreList items={ this.renderLinks( popoverItems ) } />
+ </div>
);
}
diff --git a/plugins/woocommerce/client/admin/client/analytics/report/style.scss b/plugins/woocommerce/client/admin/client/analytics/report/style.scss
index 6451f504d27..1e8ce7c5474 100644
--- a/plugins/woocommerce/client/admin/client/analytics/report/style.scss
+++ b/plugins/woocommerce/client/admin/client/analytics/report/style.scss
@@ -11,3 +11,27 @@
}
}
}
+
+// Keeps a cell's first item on the same line as its "+N more" badge. The badge
+// is a button, so once it wraps onto its own line it adds that full height and
+// rows carrying one end up taller than rows without. Flex alone (no wrap) is
+// enough for that; the name itself is still allowed to wrap onto multiple
+// lines within the bounds below, so a long name doesn't force one endless row.
+.woocommerce-analytics__inline-list {
+ display: inline-flex;
+ align-items: center;
+ max-width: 80ch;
+
+ // Break anywhere so a name with no spaces can't widen the column, and give
+ // the name a 20ch floor so it doesn't shred into short lines beside the badge.
+ > a {
+ min-width: 20ch;
+ overflow-wrap: anywhere;
+ }
+
+ // The badge carries overflow: hidden and text-overflow: ellipsis, so it
+ // renders as "+…" if flex is allowed to shrink it.
+ > .woocommerce-view-more-list {
+ flex-shrink: 0;
+ }
+}