Fix inconsistency with header spacing.

Automattic · Oct 1, 2024 · 0aedb78 · 0aedb78
1 parent 65009f1
commit 0aedb78
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 50 deletions.
diff --git a/client/a8c-for-agencies/components/layout/index.tsx b/client/a8c-for-agencies/components/layout/index.tsx
@@ -22,15 +22,7 @@ type Props = {
 	compact?: boolean;
 };
 
-function MainLayout( {
-	children,
-	className,
-	title,
-	wide,
-	withBorder,
-	compact,
-	sidebarNavigation,
-}: Props ) {
+function MainLayout( { children, className, title, wide, withBorder, sidebarNavigation }: Props ) {
 	const hasLayoutColumns = React.Children.toArray( children ).some(
 		( child ) => React.isValidElement( child ) && child.type === LayoutColumn
 	);
@@ -42,7 +34,6 @@ function MainLayout( {
 		<Main
 			className={ clsx( 'a4a-layout', className, {
 				'is-with-border': withBorder,
-				'is-compact': compact,
 			} ) }
 			fullWidthLayout={ wide }
 			wideLayout={ ! wide } // When we set to full width, we want to set this to false.

diff --git a/client/a8c-for-agencies/components/layout/style.scss b/client/a8c-for-agencies/components/layout/style.scss
@@ -75,7 +75,7 @@ html,
 }
 
 .a4a-layout__top-wrapper {
-	padding-block-start: 48px;
+	padding-block-start: 24px;
 	border-bottom: #f1f1f1 1px solid;
 
 	@include breakpoint-deprecated( "<660px" ) {
@@ -94,45 +94,28 @@ html,
 			}
 		}
 	}
-}
 
-.main.a4a-layout.is-compact .a4a-layout__top-wrapper {
-	padding-block-start: 28px;
-	@include breakpoint-deprecated( "<660px" ) {
-		padding: 0;
+	// If we don't have a navigation, we will require some spacing on the borders.
+	&:not(.has-navigation) {
+		padding-block-end: 24px;
 	}
 }
 
 .main.a4a-layout.is-with-border {
 	@include breakpoint-deprecated( ">660px" ) {
 		.a4a-layout__top-wrapper {
 			border-block-end: 1px solid var(--color-neutral-5);
-			// If we don't have a navigation, we will require some spacing on the borders.
-			&:not(.has-navigation) {
-				padding-block-end: 48px;
-			}
 		}
 	}
 }
 
-.main.a4a-layout.is-with-border.is-compact {
-	@include breakpoint-deprecated( ">660px" ) {
-		.a4a-layout__top-wrapper {
-
-			&:not(.has-navigation) {
-				padding-block-end: 28px;
-			}
-		}
-	}
-}
-
-
 .a4a-layout__header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	margin: 0 auto 24px auto;
+	margin: 0 auto;
 	height: 100%;
+	min-height: 40px;
 
 	> * + * {
 		margin-inline-start: 24px;
@@ -279,6 +262,11 @@ html,
 		}
 	}
 
+	.section-nav-tab {
+		box-sizing: border-box;
+		max-height: 48px;
+	}
+
 	.section-nav-tabs.is-dropdown {
 		width: 100%;
 		margin: 0 0 1px 0;
@@ -304,7 +292,6 @@ html,
 	}
 
 	@include breakpoint-deprecated( ">1040px" ) {
-		margin-block-start: 32px;
 		margin-inline: -16px;
 	}
 

diff --git a/client/a8c-for-agencies/sections/marketplace/wpcom-overview/index.tsx b/client/a8c-for-agencies/sections/marketplace/wpcom-overview/index.tsx
@@ -105,13 +105,7 @@ function WpcomOverview() {
 	const WPCOM_PRICING_PAGE_LINK = 'https://wordpress.com/pricing/';
 
 	return (
-		<Layout
-			className="wpcom-overview"
-			title={ translate( 'WordPress.com hosting' ) }
-			wide
-			withBorder
-			compact
-		>
+		<Layout className="wpcom-overview" title={ translate( 'WordPress.com hosting' ) } wide compact>
 			<LayoutTop>
 				<LayoutHeader>
 					<Breadcrumb

diff --git a/client/a8c-for-agencies/sections/overview/overview.tsx b/client/a8c-for-agencies/sections/overview/overview.tsx
@@ -20,7 +20,7 @@ export default function Overview() {
 	const title = translate( 'Agency Overview' );
 
 	return (
-		<Layout title={ title } wide>
+		<Layout title={ title } compact wide>
 			<LayoutTop>
 				<LayoutHeader className="a4a-overview-header">
 					<Title>{ title }</Title>

diff --git a/client/a8c-for-agencies/sections/overview/style.scss b/client/a8c-for-agencies/sections/overview/style.scss
@@ -6,8 +6,6 @@
 }
 
 .a4a-overview-header {
-	padding-block-end: 32px;
-
 	@include breakpoint-deprecated( "<660px" ) {
 		padding-block-end: 0;
 	}

diff --git a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss
@@ -130,11 +130,6 @@ $data-view-border-color: #f1f1f1;
 		margin-block-start: 32px;
 	}
 
-	&.main.a4a-layout.is-with-border .a4a-layout__top-wrapper:not(.has-navigation) {
-		padding-block-start: 24px;
-		padding-block-end: 0;
-	}
-
 	&.main.a4a-layout {
 		@include break-large {
 			background: inherit;
@@ -226,7 +221,9 @@ $data-view-border-color: #f1f1f1;
 	}
 }
 
-// FIXME: This is a temporary fix to make the referral layout columns the same height
+/* FIXME: This is a temporary fix to make the referral
+ * layout columns the same height
+ */
 .main.a4a-layout-column.referrals-layout__column {
 	height: auto;
 	overflow-y: scroll;