Untangled Plans: reduce plan grid breakpoints to compensate for site list sidebar

client/my-sites/plans-features-main/index.tsx

@@ -858,6 +858,7 @@ const PlansFeaturesMain = ( {
 										intent={ intent }
 										isCustomDomainAllowedOnFreePlan={ isCustomDomainAllowedOnFreePlan }
 										isInAdmin={ ! isInSignup }
+										isInSiteDashboard={ isInSiteDashboard }
 										isInSignup={ isInSignup }
 										onStorageAddOnClick={ handleStorageAddOnClick }
 										paidDomainName={ paidDomainName }
@@ -920,6 +921,7 @@ const PlansFeaturesMain = ( {
 													intent={ intent }
 													intervalType={ intervalType }
 													isInAdmin={ ! isInSignup }
+													isInSiteDashboard={ isInSiteDashboard }
 													isInSignup={ isInSignup }
 													onStorageAddOnClick={ handleStorageAddOnClick }
 													planTypeSelectorProps={

client/my-sites/plans-features-main/style.scss

@@ -44,6 +44,10 @@ $plan-features-header-banner-height: 20px;
 		padding: 0 0 10px;
 		overflow-x: visible;
 	}
+
+	#site-plans & .plans-wrapper {
+		margin: 0;
+	}
 }
 
 .plans-features-main__comparison-grid-container {

packages/plans-grid-next/src/components/comparison-grid/index.stories.tsx

@@ -47,6 +47,7 @@ const defaultProps = {
 	hideUnavailableFeatures: false,
 	intervalType: 'yearly',
 	isInAdmin: false,
+	isInSiteDashboard: false,
 	isInSignup: true,
 	onStorageAddOnClick: () => {},
 	planActionOverrides: undefined,

packages/plans-grid-next/src/components/comparison-grid/index.tsx

@@ -1104,14 +1104,6 @@ const ComparisonGrid = ( {
 	);
 };
 
-const GRID_BREAKPOINTS = new Map( [
-	[ 'small', 0 ],
-	[ 'smedium', 686 ],
-	[ 'medium', 835 ], // enough to fit Enterpreneur plan. was 686
-	[ 'large', 1005 ], // enough to fit Enterpreneur plan. was 870
-	[ 'xlarge', 1180 ],
-] );
-
 // TODO
 // Now that everything under is functional component, we can deprecate this wrapper and only keep ComparisonGrid instead.
 // More details can be found in https://github.com/Automattic/wp-calypso/issues/87047
@@ -1124,6 +1116,7 @@ const WrappedComparisonGrid = ( {
 	recordTracksEvent,
 	allFeaturesList,
 	intervalType,
+	isInSiteDashboard,
 	isInSignup,
 	currentSitePlanSlug,
 	selectedPlan,
@@ -1142,10 +1135,22 @@ const WrappedComparisonGrid = ( {
 }: ComparisonGridExternalProps ) => {
 	const gridContainerRef = useRef< HTMLDivElement >( null );
 
+	const gridBreakpoints = useMemo( () => {
+		// we want to fit up to the Commerce plan in this breakpoint
+		const xlargeBreakpoint = isInSiteDashboard ? 1114 : 1180;
+		return new Map( [
+			[ 'small', 0 ],
+			[ 'smedium', 686 ],
+			[ 'medium', 835 ],
+			[ 'large', 1005 ],
+			[ 'xlarge', xlargeBreakpoint ],
+		] );
+	}, [ isInSiteDashboard ] );
+
 	// TODO: this will be deprecated along side removing the wrapper component
 	const gridSize = useGridSize( {
 		containerRef: gridContainerRef,
-		containerBreakpoints: GRID_BREAKPOINTS,
+		containerBreakpoints: gridBreakpoints,
 	} );
 
 	const classNames = clsx( 'plans-grid-next', className, {
@@ -1176,6 +1181,7 @@ const WrappedComparisonGrid = ( {
 			>
 				<ComparisonGrid
 					intervalType={ intervalType }
+					isInSiteDashboard={ isInSiteDashboard }
 					isInSignup={ isInSignup }
 					currentSitePlanSlug={ currentSitePlanSlug }
 					siteId={ siteId }

packages/plans-grid-next/src/components/features-grid/index.stories.tsx

@@ -68,6 +68,7 @@ const defaultProps = {
 	hideUnavailableFeatures: false,
 	isCustomDomainAllowedOnFreePlan: false,
 	isInAdmin: false,
+	isInSiteDashboard: false,
 	isInSignup: true,
 	onStorageAddOnClick: () => {},
 	planActionOverrides: undefined,

packages/plans-grid-next/src/components/features-grid/index.tsx

@@ -378,6 +378,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		allFeaturesList,
 		coupon,
 		isInAdmin,
+		isInSiteDashboard,
 		className,
 		enableFeatureTooltips,
 		enableCategorisedFeatures,
@@ -392,15 +393,26 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 
 	const gridContainerRef = useRef< HTMLDivElement >( null );
 
-	const gridBreakpoints = useMemo(
-		() =>
-			new Map( [
-				[ 'small', 0 ],
-				[ 'medium', 740 ],
-				[ 'large', isInAdmin ? 1180 : 1320 ], // 1320 to fit Enterpreneur plan, 1180 to work in admin
-			] ),
-		[ isInAdmin ]
-	);
+	const gridBreakpoints = useMemo( () => {
+		// we want to fit up to the Commerce plan in this breakpoint
+		let largeBreakpoint;
+		if ( isInSiteDashboard ) {
+			largeBreakpoint = 1042;
+		} else if ( isInAdmin ) {
+			largeBreakpoint = 1180;
+		} else {
+			largeBreakpoint = 1320;
+		}
+
+		// we want to fit 3 plans per row in this breakpoint
+		const mediumBreakpoint = isInSiteDashboard ? 667 : 741;
+
+		return new Map( [
+			[ 'small', 0 ],
+			[ 'medium', mediumBreakpoint ],
+			[ 'large', largeBreakpoint ],
+		] );
+	}, [ isInAdmin, isInSiteDashboard ] );
 
 	// TODO: this will be deprecated along side removing the wrapper component
 	const gridSize = useGridSize( {

packages/plans-grid-next/src/components/plan-button/style.scss

@@ -6,6 +6,7 @@
 	padding: 10px 12px;
 	border: unset;
 	text-align: center;
+	text-wrap: balance;
 	width: 100%;
 	color: var(--color-text-inverted);
 

packages/plans-grid-next/src/types.ts

@@ -104,6 +104,7 @@ export interface CommonGridProps {
 	siteId?: number | null;
 	isInSignup: boolean;
 	isInAdmin: boolean;
+	isInSiteDashboard: boolean;
 	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
 	currentSitePlanSlug?: string | null;
 	hideUnavailableFeatures?: boolean; // used to hide features that are not available, instead of strike-through as explained in #76206