Protect: use flex gap to space home page stat cards

Automattic · Dec 16, 2024 · b13df3f · b13df3f
1 parent a69ab03
commit b13df3f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -43,7 +43,9 @@ const HomeAdminSectionHero: React.FC = () => {
 					</Button>
 				</>
 			</AdminSectionHero.Main>
-			<AdminSectionHero.Aside>{ <HomeStatCards /> }</AdminSectionHero.Aside>
+			<AdminSectionHero.Aside>
+				<HomeStatCards />
+			</AdminSectionHero.Aside>
 		</AdminSectionHero>
 	);
 };

diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -16,10 +16,7 @@
 .stat-cards-wrapper {
     display: flex;
     justify-content: flex-start;
-
-    > *:not( last-child ) {
-        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
-    }
+    gap: calc( var( --spacing-base ) * 3 ); // 24px
 
     .disabled {
         opacity: 0.5;