From ce3624aaa846b9940c38274f64dd5e3f117657a2 Mon Sep 17 00:00:00 2001
From: Griffith Chen <griffith.chen@automattic.com>
Date: Sun, 20 Oct 2024 10:56:00 +0800
Subject: [PATCH] Sites dashboard layout improvements

---
 .../sites/components/dotcom-style.scss        | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss
index f982eda80524e..ef27adef91b9a 100644
--- a/client/hosting/sites/components/dotcom-style.scss
+++ b/client/hosting/sites/components/dotcom-style.scss
@@ -74,30 +74,32 @@
 	}
 
 	.sites-banner-container {
+		box-sizing: border-box;
 		display: flex;
 		justify-content: center;
+		margin: 0 auto;
+		padding-inline: 48px;
+		width: 100%;
+
+		@media (max-width: 402px) {
+			padding-inline: 24px;
+		}
+
+		@include break-huge {
+			max-width: 1400px;
+		}
 	}
 
 	.sites-banner {
 		width: 100%;
-		margin-inline: 16px;
 
 		.banner__action {
 			a {
-				display: flex;
+				display: inline-flex;
 				white-space: nowrap;
 			}
 		}
 
-		@include break-large {
-			margin-inline: 26px;
-		}
-
-		@include break-huge {
-			margin-inline: 64px;
-			width: 100%;
-			max-width: 1400px;
-		}
 	}
 
 	.dataviews-filters__view-actions {
@@ -184,6 +186,10 @@
 		display: table-cell; /* ensures these cells are always shown */
 	}
 
+	table.dataviews-view-table td:last-child .dataviews-view-table__cell-content-wrapper {
+		justify-content: flex-end;
+	}
+
 	.sites-overview__content {
 		margin-top: 0;
 	}
@@ -535,9 +541,11 @@
 
 		.dataviews-wrapper {
 			.dataviews-pagination {
+				border: 0;
 				margin: 0;
+				padding-left: 0;
+				padding-right: 0;
 				position: relative;
-				width: 100%;
 			}
 
 			.spinner-wrapper {
@@ -555,7 +563,12 @@
 		margin: 0 auto;
 		max-width: 1400px;
 		box-sizing: border-box;
+
+		.dataviews-pagination {
+			width: auto;
+		}
 	}
+
 	div.a4a-layout__viewport {
 		margin: 0 auto;
 		max-width: 1400px;
@@ -564,19 +577,6 @@
 
 	.a4a-layout-column__container {
 		margin: 0 -14px;
-		.dataviews-wrapper {
-			.dataviews-pagination {
-				@include break-large {
-					padding-left: 26px;
-					padding-right: 26px;
-				}
-
-				@include break-huge {
-					padding-left: 64px;
-					padding-right: 64px;
-				}
-			}
-		}
 	}
 }
 
@@ -602,7 +602,7 @@
 			.a4a-layout__viewport {
 				display: flex;
 				margin: 0;
-				padding: 16px;
+				padding: 16px 24px;
 			}
 
 			.a4a-layout__header {