From 92230fabf6ffc59a8b12e98e83938ee78a3edce0 Mon Sep 17 00:00:00 2001
From: DDC <dehandecroos@gmail.com>
Date: Mon, 13 Jan 2025 10:56:55 -0500
Subject: [PATCH] Plans Spotlight: Align action button with a flexbox (#98195)

* Center align button

* Clean up

* Fix styling
---
 .../features-grid/spotlight-plan.tsx          | 42 ++++++++++---------
 .../src/components/features-grid/style.scss   | 21 ++++++----
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/packages/plans-grid-next/src/components/features-grid/spotlight-plan.tsx b/packages/plans-grid-next/src/components/features-grid/spotlight-plan.tsx
index 05443b12685af..02b9ab8e53ce3 100644
--- a/packages/plans-grid-next/src/components/features-grid/spotlight-plan.tsx
+++ b/packages/plans-grid-next/src/components/features-grid/spotlight-plan.tsx
@@ -44,28 +44,32 @@ const SpotlightPlan = ( {
 
 	return (
 		<div className={ spotlightPlanClasses }>
-			<PlanLogos renderedGridPlans={ [ gridPlanForSpotlight ] } isInSignup={ false } />
-			<PlanHeaders renderedGridPlans={ [ gridPlanForSpotlight ] } />
-			{ isNotFreePlan && <PlanTagline renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
-			{ isNotFreePlan && (
-				<PlanPrices
+			<div>
+				<PlanLogos renderedGridPlans={ [ gridPlanForSpotlight ] } isInSignup={ false } />
+				<PlanHeaders renderedGridPlans={ [ gridPlanForSpotlight ] } />
+				{ isNotFreePlan && <PlanTagline renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
+				{ isNotFreePlan && (
+					<PlanPrices
+						renderedGridPlans={ [ gridPlanForSpotlight ] }
+						currentSitePlanSlug={ currentSitePlanSlug }
+					/>
+				) }
+				{ isNotFreePlan && <BillingTimeframes renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
+				<PlanFeaturesList
 					renderedGridPlans={ [ gridPlanForSpotlight ] }
+					featureGroupSlug={ FEATURE_GROUP_STORAGE }
+					onStorageAddOnClick={ onStorageAddOnClick }
+					showUpgradeableStorage={ showUpgradeableStorage }
+				/>
+			</div>
+			<div className="spotlight-plan__buttons">
+				<TopButtons
+					renderedGridPlans={ [ gridPlanForSpotlight ] }
+					isInSignup={ isInSignup }
 					currentSitePlanSlug={ currentSitePlanSlug }
+					planActionOverrides={ planActionOverrides }
 				/>
-			) }
-			{ isNotFreePlan && <BillingTimeframes renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
-			<PlanFeaturesList
-				renderedGridPlans={ [ gridPlanForSpotlight ] }
-				featureGroupSlug={ FEATURE_GROUP_STORAGE }
-				onStorageAddOnClick={ onStorageAddOnClick }
-				showUpgradeableStorage={ showUpgradeableStorage }
-			/>
-			<TopButtons
-				renderedGridPlans={ [ gridPlanForSpotlight ] }
-				isInSignup={ isInSignup }
-				currentSitePlanSlug={ currentSitePlanSlug }
-				planActionOverrides={ planActionOverrides }
-			/>
+			</div>
 		</div>
 	);
 };
diff --git a/packages/plans-grid-next/src/components/features-grid/style.scss b/packages/plans-grid-next/src/components/features-grid/style.scss
index 163c792e64d0a..3dd5d696795ce 100644
--- a/packages/plans-grid-next/src/components/features-grid/style.scss
+++ b/packages/plans-grid-next/src/components/features-grid/style.scss
@@ -268,15 +268,18 @@
 	margin-bottom: 64px;
 	border: 1px solid #e0e0e0;
 	/* stylelint-disable-next-line scales/radii */
-	border-radius: 0 0 5px 5px;
+	border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+
+	div.spotlight-plan__buttons  {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	div.plan-features-2023-grid__table-item {
 		border: none;
-		&.is-top-buttons {
-			position: absolute;
-			top: 46px;
-			right: 0;
-			border-left: 0;
-		}
 
 		&.plan-features-2023-grid__header-billing-info {
 			padding-bottom: 16px;
@@ -288,6 +291,10 @@
 
 		&.popular-plan-parent-class .plan-features-2023-grid__popular-badge {
 			padding-bottom: 23px;
+			@include plans-grid-medium-large {
+				position: unset;
+				border: none;
+			}
 		}
 
 		.plan-features-2023-grid__header-title {