@automattic/charts 1.10.1 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.10.1",
+	"version": "1.10.3",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.6",
+		"@automattic/number-formatters": "^1.2.7",
 		"@babel/runtime": "7.29.7",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",
@@ -107,11 +107,11 @@
 		"@types/jest": "^30.0.0",
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
-		"@typescript/native-preview": "7.0.0-dev.20260225.1",
+		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "36.1.0",
-		"@wordpress/element": "8.2.0",
-		"@wordpress/private-apis": "1.50.0",
+		"@wordpress/components": "37.0.0",
+		"@wordpress/element": "8.3.0",
+		"@wordpress/private-apis": "1.51.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
@@ -122,7 +122,7 @@
 		"sass-embedded": "1.97.3",
 		"storybook": "10.4.6",
 		"tsdown": "0.22.2",
-		"typescript": "5.9.3"
+		"typescript": "6.0.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0 || ^19.0.0",

package/src/charts/heatmap-chart/heatmap-chart.module.scss

@@ -5,6 +5,13 @@
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 }
 
+// Height-capped grids are content-sized vertically, so the wrapper hugs them
+// instead of stretching — the consumer decides how to place it in leftover
+// space. Width-only caps keep the normal full-height layout.
+.heatmap-chart--height-capped {
+	height: max-content;
+}
+
 .heatmap-chart__empty {
 	padding: var(--wpds-dimension-padding-lg, 16px);
 	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
@@ -36,6 +43,15 @@
 	min-height: 0;
 }
 
+// A cell-height cap makes the row tracks content-bound, so the grid must not
+// stretch: leftover container height would otherwise be absorbed by the auto
+// label row. A width-only cap does not change vertical flex sizing.
+.heatmap-chart__grid--height-capped {
+	flex: 0 0 auto;
+	height: max-content;
+	min-height: 0;
+}
+
 .heatmap-chart__row {
 	display: contents;
 }
@@ -71,6 +87,13 @@
 	background: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
 }
 
+// An empty grid slot (calendar ragged edges): keeps its track but paints and
+// captures nothing. `visibility` (not `display`) so the slot still sizes.
+.heatmap-chart__cell--hidden {
+	visibility: hidden;
+	pointer-events: none;
+}
+
 // Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
 // an empty cell.
 .heatmap-chart__cell--filled {

package/src/charts/heatmap-chart/heatmap-chart.tsx

@@ -46,6 +46,10 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	className,
 	compact = false,
 	showValues,
+	maxCellWidth,
+	maxCellHeight,
+	minCellWidth,
+	minCellHeight,
 	rowLabels = [],
 	primaryColor,
 	gap = 'md',
@@ -125,6 +129,11 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		hideTooltip();
 	}, [ hideTooltip ] );
 
+	const isCellHidden = useCallback(
+		( col: number, row: number ) => data[ col ]?.data[ row ]?.hidden === true,
+		[ data ]
+	);
+
 	const onChartKeyDown = useCallback(
 		( event: React.KeyboardEvent< HTMLDivElement > ) => {
 			if (
@@ -144,26 +153,46 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 			event.preventDefault();
 
 			if ( selectedIndex === undefined ) {
-				setSelectedIndex( 0 );
+				// Start at the first navigable cell (a calendar's leading edge
+				// slots may be hidden).
+				for ( let index = 0; index < columns * rows; index++ ) {
+					if ( ! isCellHidden( Math.floor( index / rows ), index % rows ) ) {
+						setSelectedIndex( index );
+						return;
+					}
+				}
 				return;
 			}
 
-			let col = Math.floor( selectedIndex / rows );
-			let row = selectedIndex % rows;
-
+			let stepCol = 0;
+			let stepRow = 0;
 			if ( event.key === 'ArrowRight' ) {
-				col = Math.min( col + 1, columns - 1 );
+				stepCol = 1;
 			} else if ( event.key === 'ArrowLeft' ) {
-				col = Math.max( col - 1, 0 );
+				stepCol = -1;
 			} else if ( event.key === 'ArrowDown' ) {
-				row = Math.min( row + 1, rows - 1 );
+				stepRow = 1;
 			} else if ( event.key === 'ArrowUp' ) {
-				row = Math.max( row - 1, 0 );
+				stepRow = -1;
+			}
+
+			// Step past hidden slots to the next navigable cell in the pressed
+			// direction; when only hidden slots (or the edge) remain that way,
+			// the selection stays put.
+			let col = Math.floor( selectedIndex / rows );
+			let row = selectedIndex % rows;
+			do {
+				col += stepCol;
+				row += stepRow;
+			} while ( col >= 0 && col < columns && row >= 0 && row < rows && isCellHidden( col, row ) );
+
+			if ( col < 0 || col >= columns || row < 0 || row >= rows ) {
+				return;
 			}
 
 			setSelectedIndex( col * rows + row );
 		},
-		[ rows, columns, selectedIndex, hideTooltip ]
+		[ rows, columns, selectedIndex, hideTooltip, isCellHidden ]
 	);
 
 	const handleCellMouseMove = useCallback(
@@ -243,12 +272,21 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		);
 	}
 
-	const trackSize = compact ? 'var(--heatmap-cell-size)' : 'minmax(0, 1fr)';
+	// Non-compact tracks split the container by default; a max cap makes them
+	// stop growing there instead, so sparse ranges keep sensible cell sizes,
+	// and a min floor makes the grid overflow (for a scrollable wrapper)
+	// rather than crushing cells on long ranges.
+	const columnTrack = compact
+		? 'var(--heatmap-cell-size)'
+		: `minmax(${ minCellWidth ?? 0 }px, ${ maxCellWidth ? `${ maxCellWidth }px` : '1fr' })`;
+	const rowTrack = compact
+		? 'var(--heatmap-cell-size)'
+		: `minmax(${ minCellHeight ?? 0 }px, ${ maxCellHeight ? `${ maxCellHeight }px` : '1fr' })`;
 	const gridStyle: Record< string, string | number > = {
 		'--heatmap-primary': primaryColorHex,
 		'--heatmap-bg': theme.backgroundColor,
-		gridTemplateColumns: `auto repeat(${ columns }, ${ trackSize })`,
-		gridTemplateRows: `auto repeat(${ rows }, ${ trackSize })`,
+		gridTemplateColumns: `auto repeat(${ columns }, ${ columnTrack })`,
+		gridTemplateRows: `auto repeat(${ rows }, ${ rowTrack })`,
 	};
 	if ( compact ) {
 		gridStyle[ '--heatmap-cell-gap' ] = `${ compactCellGap }px`;
@@ -260,6 +298,12 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 			? `${ chartId }-cell-${ Math.floor( selectedIndex / rows ) }-${ selectedIndex % rows }`
 			: undefined;
 
+	// A capped row track makes the chart content-sized vertically: neither the
+	// wrapper nor the grid stretches, or the leftover container height would
+	// land in the auto label row. A width-only cap must keep the normal vertical
+	// flex sizing, so it does not opt into this class.
+	const heightCapped = ! compact && Boolean( maxCellHeight );
+
 	return (
 		<HeatmapContext.Provider value={ heatmapContext }>
 			<SingleChartContext.Provider value={ { chartId } }>
@@ -269,7 +313,9 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 					legendChildren={ [] }
 					trailingContent={ nonLegendChildren }
 					gap={ gap }
-					className={ clsx( 'heatmap-chart', styles[ 'heatmap-chart' ], className ) }
+					className={ clsx( 'heatmap-chart', styles[ 'heatmap-chart' ], className, {
+						[ styles[ 'heatmap-chart--height-capped' ] ]: heightCapped,
+					} ) }
 					// Explicit dimensions (the unresponsive export) pin the size; otherwise
 					// width/height are unset and the grid fills its container via CSS. The
 					// responsive export drops the measured pixels so reflow stays fluid.
@@ -289,6 +335,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 						onKeyDown={ onChartKeyDown }
 						className={ clsx( styles[ 'heatmap-chart__grid' ], {
 							[ styles[ 'heatmap-chart__grid--compact' ] ]: compact,
+							[ styles[ 'heatmap-chart__grid--height-capped' ] ]: heightCapped,
 						} ) }
 						style={ gridStyle as CSSProperties }
 					>
@@ -319,6 +366,24 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 									</span>
 									{ data.map( ( column, columnIndex ) => {
 										const cell = column.data[ rowIndex ];
+
+										// A hidden cell keeps its grid slot (so the rest of the
+										// column doesn't shift) but paints nothing and takes no
+										// interaction — a calendar's ragged edges.
+										if ( cell?.hidden ) {
+											return (
+												<div
+													key={ `cell-${ columnIndex }-${ rowIndex }` }
+													data-testid="heatmap-cell-hidden"
+													aria-hidden="true"
+													className={ clsx(
+														styles[ 'heatmap-chart__cell' ],
+														styles[ 'heatmap-chart__cell--hidden' ]
+													) }
+												/>
+											);
+										}
+
 										const value = cell?.value ?? null;
 										const present = isPresent( value );
 										const normalized = present ? getNormalizedValue( value, extent ) : 0;

package/src/charts/heatmap-chart/private/build-calendar-data.ts

@@ -25,9 +25,19 @@ const toDate = ( point: DataPointDate ): Date | null => {
 
 export const buildCalendarHeatmapData = (
 	series: DataPointDate[],
-	options: { weekStartsOn?: 0 | 1 } = {}
+	options: {
+		weekStartsOn?: 0 | 1;
+		/**
+		 * Mark the days completing the first/last week outside the series'
+		 * date span as hidden cells (empty grid slots) instead of blank
+		 * cells, giving the calendar ragged edges. Days inside the span stay
+		 * blank cells even when the series has no entry for them.
+		 */
+		hideOutOfRangeDays?: boolean;
+	} = {}
 ): CalendarHeatmapResult => {
 	const weekStartsOn = options.weekStartsOn ?? 1;
+	const hideOutOfRangeDays = options.hideOutOfRangeDays ?? true;
 
 	const entries = series
 		.map( point => ( { date: toDate( point ), value: point.value } ) )
@@ -53,6 +63,11 @@ export const buildCalendarHeatmapData = (
 	const gridStart = startOfWeek( minDate, { weekStartsOn } );
 	const weekCount = differenceInCalendarWeeks( maxDate, gridStart, { weekStartsOn } ) + 1;
 
+	// Day-key bounds for the ragged-edge option: calendar-day comparison, so
+	// entries carrying a time of day can't shift the span.
+	const minDayKey = format( minDate, 'yyyy-MM-dd' );
+	const maxDayKey = format( maxDate, 'yyyy-MM-dd' );
+
 	const rowLabels = Array.from( { length: 7 }, ( _, row ) =>
 		LABELLED_ROWS.includes( row ) ? format( addDays( gridStart, row ), 'EEE' ) : ''
 	);
@@ -85,10 +100,14 @@ export const buildCalendarHeatmapData = (
 		for ( let row = 0; row < 7; row++ ) {
 			const day = addDays( gridStart, week * 7 + row );
 			const key = format( day, 'yyyy-MM-dd' );
-			cells.push( {
+			const cell: HeatmapCell = {
 				label: format( day, 'EEE, MMM d, yyyy' ),
 				value: valueByDay.has( key ) ? ( valueByDay.get( key ) as number | null ) : null,
-			} );
+			};
+			if ( hideOutOfRangeDays && ( key < minDayKey || key > maxDayKey ) ) {
+				cell.hidden = true;
+			}
+			cells.push( cell );
 		}
 		data.push( { label, data: cells } );
 	}

package/src/charts/heatmap-chart/private/use-heatmap-colors.ts

@@ -31,7 +31,11 @@ export const getValueExtent = ( data: HeatmapColumn[] ): [ number, number ] => {
 };
 
 /**
- * Normalize a value to 0–1 within the extent. A flat extent (min === max) maps to 1.
+ * Normalize a value to 0–1 within the extent. A flat extent (min === max)
+ * maps to 1 — every cell is equally the "highest" — except an all-zero
+ * extent, which maps to 0 so a no-activity grid renders at the scale's
+ * bottom instead of full intensity.
+ *
  * @param value  - The value to normalize
  * @param extent - Tuple of [min, max] values for the normalization range
  * @return Normalized value between 0 and 1
@@ -39,7 +43,7 @@ export const getValueExtent = ( data: HeatmapColumn[] ): [ number, number ] => {
 export const getNormalizedValue = ( value: number, extent: [ number, number ] ): number => {
 	const [ min, max ] = extent;
 	if ( min === max ) {
-		return 1;
+		return max === 0 ? 0 : 1;
 	}
 	return Math.min( 1, Math.max( 0, ( value - min ) / ( max - min ) ) );
 };

package/src/charts/heatmap-chart/test/build-calendar-data.test.ts

@@ -33,6 +33,40 @@ describe( 'buildCalendarHeatmapData', () => {
 		expect( data[ 0 ].data[ 1 ].value ).toBeNull(); // Tue Jan 2 has no datum
 	} );
 
+	test( 'hides the week-completion days outside the span by default', () => {
+		const midWeek: DataPointDate[] = [
+			{ dateString: '2024-01-03', value: 5 }, // Wed
+			{ dateString: '2024-01-09', value: 2 }, // Tue (2nd week)
+		];
+		const { data } = buildCalendarHeatmapData( midWeek, {
+			weekStartsOn: 1,
+		} );
+
+		// Mon Jan 1 and Tue Jan 2 precede the span — hidden; Wed Jan 3 opens it.
+		expect( data[ 0 ].data[ 0 ].hidden ).toBe( true );
+		expect( data[ 0 ].data[ 1 ].hidden ).toBe( true );
+		expect( data[ 0 ].data[ 2 ].hidden ).toBeUndefined();
+
+		// Thu Jan 4 is inside the span with no entry — a blank cell, not hidden.
+		expect( data[ 0 ].data[ 3 ].hidden ).toBeUndefined();
+		expect( data[ 0 ].data[ 3 ].value ).toBeNull();
+
+		// Tue Jan 9 closes the span; Wed Jan 10 onward is hidden.
+		expect( data[ 1 ].data[ 1 ].hidden ).toBeUndefined();
+		expect( data[ 1 ].data[ 2 ].hidden ).toBe( true );
+		expect( data[ 1 ].data[ 6 ].hidden ).toBe( true );
+	} );
+
+	test( 'out-of-span days stay blank cells when hideOutOfRangeDays is false', () => {
+		const midWeek: DataPointDate[] = [ { dateString: '2024-01-03', value: 5 } ]; // Wed
+		const { data } = buildCalendarHeatmapData( midWeek, {
+			weekStartsOn: 1,
+			hideOutOfRangeDays: false,
+		} );
+		expect( data[ 0 ].data[ 0 ].hidden ).toBeUndefined();
+		expect( data[ 0 ].data[ 0 ].value ).toBeNull();
+	} );
+
 	test( 'labels only the first column of each month', () => {
 		const multiMonth: DataPointDate[] = [
 			{ dateString: '2024-01-01', value: 1 },

package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx

@@ -213,6 +213,57 @@ describe( 'HeatmapChart', () => {
 		expect( grid ).not.toHaveAttribute( 'aria-activedescendant' );
 	} );
 
+	// Calendar ragged edges: hidden cells keep their grid slot but paint
+	// nothing and take no interaction.
+	const raggedData: HeatmapColumn[] = [
+		{ label: 'W1', data: [ { value: null, hidden: true }, { value: 1 }, { value: 2 } ] },
+		{ label: 'W2', data: [ { value: 3 }, { value: null, hidden: true }, { value: 4 } ] },
+		{ label: 'W3', data: [ { value: 5 }, { value: 6 }, { value: null, hidden: true } ] },
+	];
+
+	test( 'hidden cells render as empty slots outside the accessibility tree', () => {
+		renderChart( { data: raggedData } );
+		expect( screen.getAllByTestId( 'heatmap-cell' ) ).toHaveLength( 6 );
+		expect( screen.getAllByTestId( 'heatmap-cell-hidden' ) ).toHaveLength( 3 );
+		expect( screen.getAllByRole( 'gridcell' ) ).toHaveLength( 6 );
+	} );
+
+	test( 'keyboard navigation skips hidden cells and never lands on them', async () => {
+		renderChart( { data: raggedData, rowLabels: [ 'Mon', 'Tue', 'Wed' ] } );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		const user = userEvent.setup();
+
+		// The initial selection starts past the hidden leading slot (0,0).
+		grid.focus();
+		await user.keyboard( '{ArrowDown}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-0-1$/ )
+		);
+
+		// ArrowRight steps over the hidden (1,1) to (2,1).
+		await user.keyboard( '{ArrowRight}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-2-1$/ )
+		);
+
+		// Only a hidden slot (2,2) lies below — the selection stays put.
+		await user.keyboard( '{ArrowDown}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-2-1$/ )
+		);
+
+		// ArrowLeft steps back over the hidden (1,1) to (0,1); ArrowUp has
+		// only the hidden (0,0) above, so the selection stays again.
+		await user.keyboard( '{ArrowLeft}{ArrowUp}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-0-1$/ )
+		);
+	} );
+
 	test( 'rows contain gridcell children in the ARIA hierarchy', () => {
 		renderChart();
 		const rows = screen.getAllByRole( 'row' );
@@ -259,6 +310,36 @@ describe( 'HeatmapChart', () => {
 		expect( grid.style.gridTemplateColumns ).toContain( 'var(--heatmap-cell-size)' );
 	} );
 
+	test( 'caps cell width without changing the normal vertical layout', () => {
+		renderChart( { maxCellWidth: 64 } );
+		const chart = screen.getByTestId( 'heatmap-chart' );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.gridTemplateColumns ).toContain( 'minmax(0px, 64px)' );
+		expect( grid.style.gridTemplateRows ).toContain( 'minmax(0px, 1fr)' );
+		expect( chart ).not.toHaveClass( 'heatmap-chart--height-capped' );
+		expect( grid ).not.toHaveClass( 'heatmap-chart__grid--height-capped' );
+	} );
+
+	test( 'content-sizes the vertical layout when cell height is capped', () => {
+		renderChart( { maxCellHeight: 42 } );
+		const chart = screen.getByTestId( 'heatmap-chart' );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.gridTemplateColumns ).toContain( 'minmax(0px, 1fr)' );
+		expect( grid.style.gridTemplateRows ).toContain( 'minmax(0px, 42px)' );
+		expect( chart ).toHaveClass( 'heatmap-chart--height-capped' );
+		expect( grid ).toHaveClass( 'heatmap-chart__grid--height-capped' );
+	} );
+
+	test( 'applies independent minimum cell width and height floors', () => {
+		renderChart( { minCellWidth: 44, minCellHeight: 32 } );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.gridTemplateColumns ).toContain( 'minmax(44px, 1fr)' );
+		expect( grid.style.gridTemplateRows ).toContain( 'minmax(32px, 1fr)' );
+	} );
+
 	test( 'applies the primaryColor prop as the cell-scale color', () => {
 		renderChart( { primaryColor: '#abcdef' } );
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );

package/src/charts/heatmap-chart/test/use-heatmap-colors.test.ts

@@ -31,4 +31,8 @@ describe( 'getNormalizedValue', () => {
 	test( 'returns 1 when min === max', () => {
 		expect( getNormalizedValue( 7, [ 7, 7 ] ) ).toBe( 1 );
 	} );
+
+	test( 'returns 0 for an all-zero extent so a no-activity grid stays at the scale bottom', () => {
+		expect( getNormalizedValue( 0, [ 0, 0 ] ) ).toBe( 0 );
+	} );
 } );

package/src/charts/heatmap-chart/types.ts

@@ -6,6 +6,13 @@ export type HeatmapCell = {
 	/** Per-cell label used in the tooltip / accessible name. */
 	label?: string;
 	value: number | null;
+	/**
+	 * Leave the cell's grid slot empty: nothing is painted and the cell is
+	 * skipped by hover and keyboard navigation, while the slot keeps its
+	 * place so the rest of the grid doesn't shift. For calendar edges, where
+	 * days completing the first/last week fall outside the covered range.
+	 */
+	hidden?: boolean;
 };
 
 /** A heatmap column (rendered left→right); its cells render top→bottom. */
@@ -32,6 +39,27 @@ export interface HeatmapChartProps
 	compact?: boolean;
 	/** Render the numeric value inside each cell. Default `! compact`. */
 	showValues?: boolean;
+	/**
+	 * Cap a cell's width (px) in non-compact mode. Cells grow up to the cap
+	 * and stop instead of splitting the whole container width, so sparse
+	 * ranges don't produce oversized cells; narrow containers still shrink
+	 * them. Ignored in compact mode, which uses a fixed cell size.
+	 */
+	maxCellWidth?: number;
+	/**
+	 * Cap a cell's height (px) in non-compact mode. Applying this cap
+	 * content-sizes the chart vertically so rows do not absorb unused height.
+	 * Ignored in compact mode, which uses a fixed cell size.
+	 */
+	maxCellHeight?: number;
+	/**
+	 * Floor a cell's width (px) in non-compact mode. Below it the grid stops
+	 * shrinking and overflows its container instead, so a scrollable wrapper
+	 * can take over for long ranges. Default 0 (cells shrink freely).
+	 */
+	minCellWidth?: number;
+	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
+	minCellHeight?: number;
 	/**
 	 * Color the cell scale interpolates toward at the highest value
 	 * (this prop > theme `heatmapChart.primaryColor` > palette `colors[0]`).

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -100,23 +100,24 @@
 	font-style: italic;
 }
 
-.interactiveRow {
+.row {
 	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
 	align-items: center;
+	// Every row reserves the same space for the interactive focus ring. Keeping
+	// this on the shared wrapper ensures that adding or removing an action never
+	// changes the row height or subgrid column edges.
+	padding: var(--focus-ring-width);
+}
+
+.interactiveRow {
 	position: relative;
 
 	// Native button reset.
-	box-sizing: border-box;
 	appearance: none;
-	width: 100%;
-	margin: 0;
-	// Reserve a ring's worth of space on every edge so the inset focus outline
-	// hugs the row without the bar painting over it (see :focus-visible below).
-	padding: var(--focus-ring-width);
 	border: 0;
 	background: none;
 	color: inherit;
@@ -179,9 +180,8 @@
 			var(--focus-ring-width) solid
 			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 		// Inset by its own width so the outer edge hugs the row boundary: the
-		// outline then sits in the row's padding (also a ring width), clear of the
-		// bar, and stays inside the overflow:auto container that would clip an
-		// outset ring.
+		// outline then sits in the shared row padding, clear of the bar, and stays
+		// inside the overflow:auto container that would clip an outset ring.
 		outline-offset: calc(-1 * var(--focus-ring-width));
 	}
 }

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
 import { __experimentalGrid as Grid, VisuallyHidden } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { Stack, Text } from '@wordpress/ui';
@@ -404,7 +403,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 										<button
 											key={ entry.id }
 											type="button"
-											className={ styles.interactiveRow }
+											className={ clsx( styles.row, styles.interactiveRow ) }
 											onClick={ entry.onClick }
 											aria-label={ entry.ariaLabel }
 										>
@@ -414,7 +413,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 									);
 								}
 
-								return <Fragment key={ entry.id }>{ rowCells }</Fragment>;
+								return (
+									<div key={ entry.id } className={ styles.row }>
+										{ rowCells }
+									</div>
+								);
 							} ) }
 						</Grid>
 					) }

package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx

@@ -372,12 +372,6 @@ describe( 'LeaderboardChart', () => {
 	} );
 
 	describe( 'Responsive wrapper', () => {
-		it( 'fills parent container (height:100%) by default', () => {
-			render( <LeaderboardChart data={ mockData } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { height: '100%' } );
-		} );
-
 		it( 'applies explicit width and height to chart container', () => {
 			const { useParentSize } = jest.requireMock( '@visx/responsive' );
 			useParentSize.mockReturnValue( {

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -226,12 +226,6 @@ describe( 'PieSemiCircleChart', () => {
 	} );
 
 	describe( 'Responsive wrapper', () => {
-		it( 'fills parent container (height:100%) by default', () => {
-			render( <PieSemiCircleChart data={ mockData } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { height: '100%' } );
-		} );
-
 		it( 'constrains chart to 2:1 ratio from measured dimensions', () => {
 			// Mock returns width:400, height:200, so chart renders at 400×200 (2:1 ratio)
 			render( <PieSemiCircleChart data={ mockData } /> );