Remove the max-width for the banner

Automattic · Nov 26, 2024 · 30d2f7c · 30d2f7c
1 parent 691bfd9
commit 30d2f7c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/client/sites/components/dotcom-style.scss b/client/sites/components/dotcom-style.scss
@@ -14,19 +14,6 @@
 }
 
 .wpcom-site .main.a4a-layout.sites-dashboard {
-	.a4a-layout__top-wrapper,
-	.a4a-layout__body {
-		> * {
-			padding-inline: 48px;
-			// Override the max-width set in a8c-for-agencies/components/layout/style.scss
-			// as the title aligns with DataViews (full width).
-			max-width: revert;
-			@media (max-width: 402px) {
-				padding-inline: 24px;
-			}
-		}
-	}
-
 	.a4a-layout__header {
 		align-items: center;
 	}
@@ -83,10 +70,6 @@
 		@media (max-width: 402px) {
 			padding-inline: 24px;
 		}
-
-		@include break-huge {
-			max-width: 1400px;
-		}
 	}
 
 	.sites-banner {
@@ -380,14 +363,6 @@
 	}
 }
 
-.wpcom-site .main.a4a-layout.sites-dashboard.sites-dashboard__layout.preview-hidden {
-	div.a4a-layout__viewport {
-		// margin: 0 auto;
-		// max-width: 1400px;
-		// box-sizing: border-box;
-	}
-}
-
 // Use flexbox to structure of fly-out panel.
 .wpcom-site .main.a4a-layout.sites-dashboard.sites-dashboard__layout:not(.preview-hidden) {
 	&.a4a-layout,

diff --git a/client/sites/components/sites-dataviews/dataview-style.scss b/client/sites/components/sites-dataviews/dataview-style.scss
@@ -62,4 +62,25 @@
 			}
 		}
 	}
+}
+
+.wpcom-site .main.a4a-layout.sites-dashboard {
+	.a4a-layout__top-wrapper,
+	.a4a-layout__body {
+		> * {
+			padding-inline: 48px;
+
+			// Override the max-width set in a8c-for-agencies/components/layout/style.scss
+			// as the title aligns with DataViews (full width).
+			// TODO: Remove when we drop A4A Layout or when A4A Layout drops the max-width.
+			max-width: revert;
+
+			// To align with Core's hard-coded device width.
+			// https://github.com/WordPress/gutenberg/blob/ed66cc50e3c0b6785a48c15230c090790c0b0e6c/packages/dataviews/src/components/dataviews/style.scss#L84
+			// TODO: Remove when Core changes to use one of the predefined breakpoints.
+			@media (max-width: 430px) {
+				padding-inline: 24px;
+			}
+		}
+	}
 }