Fix/7174 dismiss button alignment (https://github.com/woocommerce/woocommerce-admin/pull/8168)

* Combine all the .woocommerce-task-dashboard__container .woocommerce-task-card rules in one block.

* Move the .woocommerce-task-card__section-controls text-align center rule up in specificity so it overrides the rule in experimental-list.
Do we need the experimental-list package still?

* Changelog for 7174/8168.

* Expand button to container width and center text rather than centering the entire button in the ellipsis menu.

* Move ellipsis menu button style to _global so it applies, um, globally.

* Update changelog description for 7174/8186.

* Move ellipsis-menu popover button style to package from _global.

* Add components package changelog for Dismiss button in Unreleased section.

plugins/woocommerce-admin/changelogs/fix-7174-dismiss-button-alignment

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Tweak
+
+Grow and center buttons in all WooCommerce ellipsis menu popover containers. #8168

plugins/woocommerce-admin/client/tasks/tasks.scss

@@ -12,15 +12,7 @@
 				margin-top: 8px;
 			}
 		}
-	}
 
-	.woocommerce-task-payments {
-		width: 680px;
-		margin: auto;
-		max-width: 100%;
-	}
-
-	.woocommerce-task-card {
 		.wooocommerce-task-card__header {
 			display: flex;
 		}
@@ -36,6 +28,12 @@
 			min-width: unset;
 		}
 	}
+
+	.woocommerce-task-payments {
+		width: 680px;
+		margin: auto;
+		max-width: 100%;
+	}
 }
 
 .woocommerce-task__additional-info,
@@ -145,10 +143,6 @@
 	}
 }
 
-.woocommerce-task-card__section-controls {
-	text-align: center;
-}
-
 .woocommerce-task-dashboard__container {
 	.woocommerce-task-card.is-loading {
 		.woocommerce-card__body {

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 -   Add `labelPositionToLeft` prop to the `OrderStatus` component. #8121
 -   Remove dev dependency `@woocommerce/wc-admin-settings`. #8057
 -   Fix incorrect screen reader text generated for data points on charts table. #8181
+-   Grow and center buttons in all WooCommerce ellipsis menu popover containers. #8168
 
 # 8.1.1
 

plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss

@@ -28,6 +28,11 @@
 
 	.woocommerce-ellipsis-menu__content {
 		width: 100%;
+
+		.components-button {
+			justify-content: center;
+			width: 100%;
+		}
 	}
 
 	.woocommerce-ellipsis-menu__title,