Sites Dataview: Update margin alignment (#94694)

* Fix lint issues * Fix small width header issue * Remove right alignment of Actions column
Automattic · Sep 20, 2024 · e9b7ca5 · e9b7ca5
1 parent b92c511
commit e9b7ca5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 72 deletions.
diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss
@@ -17,18 +17,13 @@
 	.a4a-layout__top-wrapper,
 	.a4a-layout__body {
 		> * {
-			padding-inline: 8px;
+			padding-inline: 48px;
+			max-width: none;
+			max-width: 1400px !important;
+			margin-inline: auto !important;
 
-			@include breakpoint-deprecated(">660px") {
-				padding-inline: 8px;
-			}
-
-			@include breakpoint-deprecated(">960px") {
-				padding-inline: 26px;
-			}
-
-			@include break-huge {
-				padding-inline: 64px;
+			@media (max-width: 402px) {
+				padding-inline: 24px;
 			}
 		}
 	}
@@ -555,20 +550,19 @@
 }
 
 .wpcom-site .main.a4a-layout.sites-dashboard.sites-dashboard__layout.preview-hidden {
-	@media (min-width: $break-xhuge) {
-		div.a4a-layout__viewport {
-			margin: 0 auto;
-			max-width: 1400px;
-			box-sizing: border-box;
-		}
-		.dataviews-wrapper {
-			margin: 0 auto;
-			max-width: 1400px;
-			box-sizing: border-box;
-		}
+	.dataviews-wrapper {
+		margin: 0 auto;
+		max-width: 1400px;
+		box-sizing: border-box;
+	}
+	div.a4a-layout__viewport {
+		margin: 0 auto;
+		max-width: 1400px;
+		box-sizing: border-box;
 	}
 
 	.a4a-layout-column__container {
+		margin: 0 -14px;
 		.dataviews-wrapper {
 			.dataviews-pagination {
 				@include break-large {

diff --git a/client/hosting/sites/components/style.scss b/client/hosting/sites/components/style.scss
@@ -41,9 +41,6 @@
 	.sites-dataviews__site {
 		.button {
 			flex-shrink: 0;
-			@include breakpoint-deprecated("<480px") {
-				width: 90px;
-			}
 		}
 		.sites-dataviews__site-name {
 			padding: 0;
@@ -66,27 +63,6 @@
 		&.sites-dashboard__layout:not(.preview-hidden) .sites-overview__page-subtitle {
 			display: none;
 		}
-
-		.dataviews-view-table tr th:first-child,
-		.dataviews-view-table tr td:first-child {
-			padding-left: 26px;
-		}
-		.dataviews-view-table tr th:last-child,
-		.dataviews-view-table tr td:last-child {
-			padding-right: 26px;
-			width: 20px;
-			white-space: nowrap;
-		}
-	}
-	@media (min-width: $break-huge) {
-		.dataviews-view-table tr th:first-child,
-		.dataviews-view-table tr td:first-child {
-			padding-left: 64px;
-		}
-		.dataviews-view-table tr th:last-child,
-		.dataviews-view-table tr td:last-child {
-			padding-right: 64px;
-		}
 	}
 
 	@media (max-width: 660px) {
@@ -104,10 +80,6 @@
 			.sites-overview {
 				overflow: hidden;
 
-				.a4a-layout__viewport {
-					padding-inline: 16px;
-				}
-
 				.sites-overview__page-title-container {
 					display: flex;
 				}
@@ -149,15 +121,6 @@
 			}
 		}
 
-		.dataviews-view-table tr th:first-child,
-		.dataviews-view-table tr td:first-child {
-			padding: 8px 16px 8px 16px;
-		}
-		.dataviews-view-table tr td:last-child {
-			padding: 0;
-			padding-inline-end: 16px;
-		}
-
 		.components-button.is-compact.has-icon:not(.has-text).dataviews-filters-button {
 			min-width: 40px;
 		}
@@ -188,14 +151,6 @@
 			display: none;
 		}
 
-		tr td:first-child {
-			padding-inline-start: 8px;
-		}
-
-		tr td:last-child {
-			padding-inline-end: 8px;
-		}
-
 		.item-preview__content {
 			padding: 10px 10px 88px; /* 88px matches the padding from PR #39201. */
 
@@ -233,10 +188,6 @@
 			.sites-overview {
 				padding: 0;
 
-				.a4a-layout__viewport {
-					padding-inline: 16px;
-				}
-
 				.a4a-layout__header-title {
 					font-size: rem(20px);
 					font-weight: 500;

diff --git a/client/sites-dashboard/components/sites-ellipsis-menu.tsx b/client/sites-dashboard/components/sites-ellipsis-menu.tsx
@@ -284,7 +284,6 @@ const SiteDropdownMenu = styled( DropdownMenu )( {
 	'> .components-button': {
 		height: '44px',
 		width: '44px',
-		marginRight: '-12px',
 		minWidth: 0,
 		color: 'var( --color-text-subtle )',
 		verticalAlign: 'middle',