DataViews: Reduce the size of action button in Grid layout (WordPress…

…#67032) Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]>
bph · Nov 19, 2024 · 6b42879 · 6b42879
1 parent 68d7776
commit 6b42879
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -57,6 +57,7 @@ interface ItemActionsProps< Item > {
 interface CompactItemActionsProps< Item > {
 	item: Item;
 	actions: Action< Item >[];
+	isSmall?: boolean;
 }
 
 interface PrimaryActionsProps< Item > {
@@ -214,7 +215,13 @@ export default function ItemActions< Item >( {
 	}, [ actions, item ] );
 
 	if ( isCompact ) {
-		return <CompactItemActions item={ item } actions={ eligibleActions } />;
+		return (
+			<CompactItemActions
+				item={ item }
+				actions={ eligibleActions }
+				isSmall
+			/>
+		);
 	}
 
 	if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) {
@@ -250,12 +257,13 @@ export default function ItemActions< Item >( {
 function CompactItemActions< Item >( {
 	item,
 	actions,
+	isSmall,
 }: CompactItemActionsProps< Item > ) {
 	return (
 		<Menu
 			trigger={
 				<Button
-					size="compact"
+					size={ isSmall ? 'small' : 'compact' }
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					accessibleWhenDisabled

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -16,7 +16,7 @@
 		}
 
 		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
 			display: flex;
 			align-items: center;