Fix Locations summary page layout (#103349)

Author: dognose24

client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx

@@ -56,6 +56,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
 	query,
 	summaryUrl,
 	summary = false,
+	listItemClassName,
 } ) => {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
@@ -429,6 +430,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
 						}
 						onShowMoreClick={ onShowMoreClick }
 						overlay={ moduleOverlay }
+						listItemClassName={ listItemClassName }
 					/>
 				</>
 			) }

client/my-sites/stats/features/modules/stats-locations/style.scss

@@ -90,7 +90,9 @@ $locations-horizontal-bar-width: 380px;
 	.stats-card.list-locations,
 	.stats-card-skeleton.locations-skeleton {
 		.stats-card--hero .stats-card-header {
-			padding: 0 24px 12px 0;
+			&:not(.stats__summary--narrow-mobile) {
+				padding: 0 24px 12px 0;
+			}
 		}
 
 		.stats-card-header.stats-card-header--split .stats-card-header--main__left {
@@ -109,6 +111,12 @@ $locations-horizontal-bar-width: 380px;
 			flex-direction: column;
 		}
 	}
+
+	.stats__summary--narrow-mobile {
+		.stats-card--column-header {
+			padding: 0;
+		}
+	}
 }
 
 .stats__module-list--traffic .stats-card.list-locations,
@@ -211,6 +219,11 @@ $locations-horizontal-bar-width: 380px;
 			flex: 2;
 			margin: 0 24px;
 
+			// Corresponding to .stats-card--hero above.
+			.stats-card-header {
+				padding: 0 0 12px;
+			}
+
 			.stats-geochart {
 				margin: 0 auto;
 				overflow: hidden;

packages/components/src/horizontal-bar-list/stats-card.tsx

@@ -134,7 +134,11 @@ const StatsCard = ( props: StatsCardProps ) => {
 			>
 				{ !! heroElement && (
 					<div className={ `${ BASE_CLASS_NAME }--hero` }>
-						{ splitHeader && <div className={ `${ BASE_CLASS_NAME }-header` }>{ titleNode }</div> }
+						{ splitHeader && (
+							<div className={ clsx( `${ BASE_CLASS_NAME }-header`, headerClassName ) }>
+								{ titleNode }
+							</div>
+						) }
 						{ heroElement }
 					</div>
 				) }