From d45b50b855f3dec1ff5d09153f596ac26ca9c20f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Apr 2024 17:53:22 +0100
Subject: [PATCH 01/17] Update metrics

---
 packages/dataviews/src/style.scss             | 58 +++++++------------
 .../edit-site/src/components/page/style.scss  | 12 +++-
 2 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index d2d61ee383173..afdfc952bc1b1 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -7,22 +7,19 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-15 $grid-unit-40 0;
-	margin-bottom: $grid-unit-15;
+	padding: $grid-unit-20 var(--page-horizontal-padding);
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
 
 	.components-search-control {
 		.components-base-control__field {
-			max-width: 240px;
+			max-width: 128px;
 		}
 	}
 }
 
 .dataviews-filters__container {
-	padding-right: $grid-unit-40;
-
 	.dataviews-filters__reset-button[aria-disabled="true"] {
 		&,
 		&:hover {
@@ -44,7 +41,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-40;
+	padding: $grid-unit-15 var(--page-horizontal-padding);
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
@@ -102,7 +99,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-40;
+			padding-left: var(--page-horizontal-padding);
 
 			.dataviews-view-table-header-button,
 			.dataviews-view-table-header {
@@ -112,7 +109,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-40;
+			padding-right: var(--page-horizontal-padding);
 		}
 
 		&:last-child {
@@ -281,7 +278,7 @@
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 $grid-unit-40;
+	padding: 0 var(--page-horizontal-padding);
 
 	@include break-xlarge() {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -385,7 +382,6 @@
 
 .dataviews-view-list {
 	margin: 0;
-	padding: $grid-unit-10;
 
 	li {
 		margin: 0;
@@ -393,19 +389,8 @@
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			padding-right: $grid-unit-30;
 			border-radius: $grid-unit-05;
 
-			&::after {
-				position: absolute;
-				content: "";
-				top: 100%;
-				left: $grid-unit-30;
-				right: $grid-unit-30;
-				background: $gray-100;
-				height: 1px;
-			}
-
 			> * {
 				width: 100%;
 			}
@@ -418,6 +403,7 @@
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
 
 				.dataviews-view-list__primary-field,
 				.dataviews-view-list__fields {
@@ -430,37 +416,33 @@
 	li.is-selected,
 	li.is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: var(--wp-admin-theme-color);
-			color: $white;
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
 
 			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields,
 			.components-button {
-				color: $white;
-			}
-
-			&::after {
-				background: transparent;
+				color: var(--wp-admin-theme-color);
 			}
 		}
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
+		border-top: 1px solid $gray-100;
 
 		&:focus-visible {
 			&::before {
 				position: absolute;
 				content: "";
-				top: -1px;
-				right: -1px;
-				bottom: -1px;
-				left: -1px;
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				z-index: -1;
-				border-radius: $grid-unit-05;
+				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				right: var(--wp-admin-border-width-focus);
+				bottom: var(--wp-admin-border-width-focus);
+				left: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui;
 			}
 		}
 		.dataviews-view-list__primary-field {
@@ -472,11 +454,11 @@
 	.dataviews-view-list__media-wrapper {
 		width: $grid-unit-50;
 		height: $grid-unit-50;
-		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
 		background-color: $gray-100;
+		border-radius: $grid-unit-05;
 
 		img {
 			width: 100%;
@@ -529,7 +511,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-40;
+	padding: 0 var(--page-horizontal-padding);
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 4f7f60967df45..96bbfebaf2b9b 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -1,12 +1,14 @@
 .edit-site-page {
+	--page-horizontal-padding: #{$grid-unit-60};
+
 	color: $gray-800;
 	background: $white;
 	height: 100%;
+	container: edit-site-page / inline-size;
 }
 
 .edit-site-page-header {
-	padding: $grid-unit-20 $grid-unit-40;
-	min-height: $grid-unit * 9;
+	padding: $grid-unit-20 var(--page-horizontal-padding);
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
@@ -24,6 +26,12 @@
 	}
 }
 
+@container (max-width: 430px) {
+	.edit-site-page-content {
+		--page-horizontal-padding: #{$grid-unit-30};
+	}
+}
+
 .edit-site-page-content {
 	height: 100%;
 	display: flex;

From 975b3b231dc3692eed20a28a67fbc1bc43868016 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Apr 2024 18:30:58 +0100
Subject: [PATCH 02/17] vars

---
 packages/dataviews/src/style.scss                    | 12 ++++++------
 .../src/components/page-patterns/style.scss          |  2 +-
 packages/edit-site/src/components/page/style.scss    |  8 +++++---
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index afdfc952bc1b1..ac9277437c474 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -7,7 +7,7 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-20 var(--page-horizontal-padding);
+	padding: calc(var(--page-horizontal-spacing-unit) * 3) calc(var(--page-horizontal-spacing-unit) * 5);
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -41,7 +41,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 var(--page-horizontal-padding);
+	padding: calc(var(--page-horizontal-spacing-unit) * 2) calc(var(--page-horizontal-spacing-unit) * 5);
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
@@ -99,7 +99,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: var(--page-horizontal-padding);
+			padding-left: calc(var(--page-horizontal-spacing-unit) * 5);
 
 			.dataviews-view-table-header-button,
 			.dataviews-view-table-header {
@@ -109,7 +109,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: var(--page-horizontal-padding);
+			padding-right: calc(var(--page-horizontal-spacing-unit) * 5);
 		}
 
 		&:last-child {
@@ -278,7 +278,7 @@
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 var(--page-horizontal-padding);
+	padding: 0 calc(var(--page-horizontal-spacing-unit) * 5);
 
 	@include break-xlarge() {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -511,7 +511,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 var(--page-horizontal-padding);
+	padding: 0 calc(var(--page-horizontal-spacing-unit) * 5);
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index c8d23fc1843b1..11f63a8bda10e 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -101,7 +101,7 @@
 	.edit-site-patterns__section-header {
 		border-bottom: 1px solid #f0f0f0;
 		min-height: 72px;
-		padding: $grid-unit-20 $grid-unit-40;
+		padding: calc(var(--page-vertical-spacing-unit) * 3) calc(var(--page-horizontal-spacing-unit) * 5);
 		position: sticky;
 		top: 0;
 		z-index: 2;
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 96bbfebaf2b9b..990c2a3ca6ebe 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -1,5 +1,6 @@
 .edit-site-page {
-	--page-horizontal-padding: #{$grid-unit-60};
+	--page-horizontal-spacing-unit: #{$grid-unit-10};
+	--page-vertical-spacing-unit: #{$grid-unit-10};
 
 	color: $gray-800;
 	background: $white;
@@ -8,7 +9,7 @@
 }
 
 .edit-site-page-header {
-	padding: $grid-unit-20 var(--page-horizontal-padding);
+	padding: calc(var(--page-vertical-spacing-unit) * 3) calc(var(--page-horizontal-spacing-unit) * 5);
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
@@ -28,7 +29,8 @@
 
 @container (max-width: 430px) {
 	.edit-site-page-content {
-		--page-horizontal-padding: #{$grid-unit-30};
+		--page-horizontal-spacing-unit: #{$grid-unit-05};
+		--page-vertical-spacing-unit: #{$grid-unit-05};
 	}
 }
 

From afc52a1354334e165d87a66c0605d1fd91c6192b Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Apr 2024 18:37:22 +0100
Subject: [PATCH 03/17] A different approach

---
 packages/dataviews/src/style.scss             | 19 +++++++++++++------
 .../src/components/page-patterns/style.scss   |  2 +-
 .../edit-site/src/components/page/style.scss  | 10 +++-------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index ac9277437c474..a139d1ff4d0c4 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -7,7 +7,7 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: calc(var(--page-horizontal-spacing-unit) * 3) calc(var(--page-horizontal-spacing-unit) * 5);
+	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -41,7 +41,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: calc(var(--page-horizontal-spacing-unit) * 2) calc(var(--page-horizontal-spacing-unit) * 5);
+	padding: $grid-unit-30 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
@@ -99,7 +99,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: calc(var(--page-horizontal-spacing-unit) * 5);
+			padding-left: $grid-unit-60;
 
 			.dataviews-view-table-header-button,
 			.dataviews-view-table-header {
@@ -109,7 +109,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: calc(var(--page-horizontal-spacing-unit) * 5);
+			padding-right: $grid-unit-60;
 		}
 
 		&:last-child {
@@ -278,7 +278,7 @@
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 calc(var(--page-horizontal-spacing-unit) * 5);
+	padding: 0 $grid-unit-60;
 
 	@include break-xlarge() {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -511,7 +511,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 calc(var(--page-horizontal-spacing-unit) * 5);
+	padding: 0 $grid-unit-60;
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -772,3 +772,10 @@
 		}
 	}
 }
+
+@container (max-width: 430px) {
+	.dataviews-pagination,
+	.dataviews-filters__view-actions {
+		padding: $grid-unit-20 $grid-unit-30;
+	}
+}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 11f63a8bda10e..8b2cb18145147 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -101,7 +101,7 @@
 	.edit-site-patterns__section-header {
 		border-bottom: 1px solid #f0f0f0;
 		min-height: 72px;
-		padding: calc(var(--page-vertical-spacing-unit) * 3) calc(var(--page-horizontal-spacing-unit) * 5);
+		padding: $grid-unit-30 $grid-unit-60;
 		position: sticky;
 		top: 0;
 		z-index: 2;
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 990c2a3ca6ebe..bde11d972c207 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -1,7 +1,4 @@
 .edit-site-page {
-	--page-horizontal-spacing-unit: #{$grid-unit-10};
-	--page-vertical-spacing-unit: #{$grid-unit-10};
-
 	color: $gray-800;
 	background: $white;
 	height: 100%;
@@ -9,7 +6,7 @@
 }
 
 .edit-site-page-header {
-	padding: calc(var(--page-vertical-spacing-unit) * 3) calc(var(--page-horizontal-spacing-unit) * 5);
+	padding: $grid-unit-30 $grid-unit-60;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
@@ -28,9 +25,8 @@
 }
 
 @container (max-width: 430px) {
-	.edit-site-page-content {
-		--page-horizontal-spacing-unit: #{$grid-unit-05};
-		--page-vertical-spacing-unit: #{$grid-unit-05};
+	.edit-site-page-header {
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 

From 6f15aa3e40df1f174d7534a6ab3ef01ba1e2a47e Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Apr 2024 18:38:30 +0100
Subject: [PATCH 04/17] pagination

---
 packages/dataviews/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index a139d1ff4d0c4..e2f53ae2f2ba9 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -41,7 +41,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-30 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;

From dae0d7b805679a022e7a11aee4ca2de19ba1d269 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 26 Apr 2024 14:39:44 +0100
Subject: [PATCH 05/17] List layout

---
 packages/dataviews/src/style.scss | 41 +++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index e2f53ae2f2ba9..68a73b8b5da20 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -382,6 +382,7 @@
 
 .dataviews-view-list {
 	margin: 0;
+	padding: 0 $grid-unit-10;
 
 	li {
 		margin: 0;
@@ -389,8 +390,19 @@
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
+			padding-right: $grid-unit-20;
 			border-radius: $grid-unit-05;
 
+			&::after {
+				position: absolute;
+				content: "";
+				top: 100%;
+				left: $grid-unit-20;
+				right: $grid-unit-20;
+				background: $gray-100;
+				height: 1px;
+			}
+
 			> * {
 				width: 100%;
 			}
@@ -403,7 +415,6 @@
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
-				background-color: #f8f8f8;
 
 				.dataviews-view-list__primary-field,
 				.dataviews-view-list__fields {
@@ -416,33 +427,37 @@
 	li.is-selected,
 	li.is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: $gray-900;
+			background-color: var(--wp-admin-theme-color);
+			color: $white;
 
 			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields,
 			.components-button {
-				color: var(--wp-admin-theme-color);
+				color: $white;
+			}
+
+			&::after {
+				background: transparent;
 			}
 		}
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-20 $grid-unit-30;
+		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-20;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
-		border-top: 1px solid $gray-100;
 
 		&:focus-visible {
 			&::before {
 				position: absolute;
 				content: "";
-				top: calc(var(--wp-admin-border-width-focus) + 1px);
-				right: var(--wp-admin-border-width-focus);
-				bottom: var(--wp-admin-border-width-focus);
-				left: var(--wp-admin-border-width-focus);
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-radius: $radius-block-ui;
+				top: -1px;
+				right: -1px;
+				bottom: -1px;
+				left: -1px;
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				z-index: -1;
+				border-radius: $grid-unit-05;
 			}
 		}
 		.dataviews-view-list__primary-field {
@@ -454,11 +469,11 @@
 	.dataviews-view-list__media-wrapper {
 		width: $grid-unit-50;
 		height: $grid-unit-50;
+		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
 		background-color: $gray-100;
-		border-radius: $grid-unit-05;
 
 		img {
 			width: 100%;

From 8599ed4cb7168a64081a5a2251d20d0ba932aa4d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 2 May 2024 17:25:09 +0100
Subject: [PATCH 06/17] filter, grid spacing

---
 packages/dataviews/src/style.scss   | 2 +-
 packages/dataviews/src/view-grid.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 392dfa7cc3cfd..b16ab84397545 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -7,7 +7,7 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-30 $grid-unit-60;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index fbb632f94632c..0ab1d8836cfd6 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -215,7 +215,7 @@ export default function ViewGrid( {
 		<>
 			{ hasData && (
 				<Grid
-					gap={ 6 }
+					gap={ 8 }
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"

From 12a916ffb468be0723bf6ce5d781c8ac18f3b843 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 2 May 2024 17:31:52 +0100
Subject: [PATCH 07/17] list item padding

---
 packages/dataviews/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index b748516d2fdc4..2f03a2cb47af8 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -440,7 +440,7 @@
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-20 $grid-unit-40;
+		padding: $grid-unit-20 $grid-unit-30;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
 		border-top: 1px solid $gray-100;

From 756bb45a35299ecc7ce59f0a0455f1d023e0d8ee Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 3 May 2024 13:22:36 +0100
Subject: [PATCH 08/17] Further adjustments

---
 packages/dataviews/src/style.scss               | 17 +++++++++++++++--
 .../edit-site/src/components/page/style.scss    |  6 +++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 2f03a2cb47af8..9c9196ad0b6f6 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -7,14 +7,16 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-30 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
+	transition: padding ease-out 0.2s;
+	@include reduce-motion("transition");
 
 	.components-search-control {
 		.components-base-control__field {
-			max-width: 128px;
+			max-width: 240px;
 		}
 	}
 }
@@ -24,6 +26,7 @@
 		&,
 		&:hover {
 			opacity: 0;
+			padding: 0;
 		}
 
 		&:focus {
@@ -45,6 +48,8 @@
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
+	transition: padding ease-out 0.2s;
+	@include reduce-motion("transition");
 }
 
 .dataviews-pagination__page-selection {
@@ -786,4 +791,12 @@
 	.dataviews-filters__view-actions {
 		padding: $grid-unit-20 $grid-unit-30;
 	}
+
+	.dataviews-filters__view-actions {
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
 }
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index bde11d972c207..11b5357c81ac7 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -3,15 +3,19 @@
 	background: $white;
 	height: 100%;
 	container: edit-site-page / inline-size;
+	transition: width ease-out 0.2s;
+	@include reduce-motion("transition");
 }
 
 .edit-site-page-header {
-	padding: $grid-unit-30 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-60;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
+	transition: padding ease-out 0.2s;
+	@include reduce-motion("transition");
 	.components-text {
 		color: $gray-800;
 	}

From 6d27cf4e18ccf8221c9cae7b4c4251a747141314 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 9 May 2024 13:40:45 +0100
Subject: [PATCH 09/17] disable stylelint for container queries

---
 packages/dataviews/src/style.scss                 | 2 +-
 packages/edit-site/src/components/page/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 9c9196ad0b6f6..ec23292e48bc1 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -786,7 +786,7 @@
 	}
 }
 
-@container (max-width: 430px) {
+@container (max-width: 430px) { /* stylelint-disable */
 	.dataviews-pagination,
 	.dataviews-filters__view-actions {
 		padding: $grid-unit-20 $grid-unit-30;
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 11b5357c81ac7..ef49dd2465506 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -2,7 +2,7 @@
 	color: $gray-800;
 	background: $white;
 	height: 100%;
-	container: edit-site-page / inline-size;
+	container: edit-site-page / inline-size; /* stylelint-disable */
 	transition: width ease-out 0.2s;
 	@include reduce-motion("transition");
 }

From 1000a1786a9aa8a7301b8357c3cddac8a6086fb7 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 17 May 2024 12:56:01 +0100
Subject: [PATCH 10/17] Add description to stylelint-disable

---
 packages/dataviews/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index f9d5af5bd4f0c..a71c7d86047a2 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -804,7 +804,7 @@
 	}
 }
 
-@container (max-width: 430px) { /* stylelint-disable */
+@container (max-width: 430px) { /* stylelint-disable -- '@container' not yet globally permitted */
 	.dataviews-pagination,
 	.dataviews-filters__view-actions {
 		padding: $grid-unit-20 $grid-unit-30;

From 94806b15f11efab206957d9fecc152c4ea581072 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 21 May 2024 11:00:45 +0100
Subject: [PATCH 11/17] Add container, update table + grid

---
 packages/dataviews/src/style.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index a71c7d86047a2..11952f06e4df6 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -3,6 +3,7 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
+	container: dataviews-wrapper / inline-size; /* stylelint-disable -- '@container' not globally permitted */
 }
 
 .dataviews-filters__view-actions {
@@ -804,7 +805,7 @@
 	}
 }
 
-@container (max-width: 430px) { /* stylelint-disable -- '@container' not yet globally permitted */
+@container (max-width: 430px) {
 	.dataviews-pagination,
 	.dataviews-filters__view-actions {
 		padding: $grid-unit-20 $grid-unit-30;
@@ -817,6 +818,19 @@
 			}
 		}
 	}
+
+	.dataviews-view-table tr td:first-child, .dataviews-view-table tr th:first-child {
+		padding-left: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child, .dataviews-view-table tr th:last-child {
+		padding-right: $grid-unit-30;
+	}
+
+	.dataviews-view-grid {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
 }
 
 .dataviews-bulk-actions-toolbar-wrapper {

From 122a91ad02959ca0d2d107c00583546a84cc63c3 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 21 May 2024 11:10:55 +0100
Subject: [PATCH 12/17] Use css vars

---
 packages/dataviews/src/style.scss | 34 +++++++++++--------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 11952f06e4df6..acb981f6445d9 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -1,3 +1,7 @@
+:root {
+	--dataviews-padding-x: #{$grid-unit-60};
+}
+
 .dataviews-wrapper {
 	height: 100%;
 	overflow: auto;
@@ -8,7 +12,7 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-20 var(--dataviews-padding-x);
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -45,7 +49,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-20 var(--dataviews-padding-x);
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
@@ -105,7 +109,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-60;
+			padding-left: var(--dataviews-padding-x);
 
 			.dataviews-view-table-header-button,
 			.dataviews-view-table-header {
@@ -115,7 +119,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-60;
+			padding-right: var(--dataviews-padding-x);
 		}
 
 		&:last-child {
@@ -284,7 +288,7 @@
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 $grid-unit-60;
+	padding: 0 var(--dataviews-padding-x);
 
 	@include break-xlarge() {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -547,7 +551,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-60;
+	padding: 0 var(--dataviews-padding-x);
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -806,9 +810,8 @@
 }
 
 @container (max-width: 430px) {
-	.dataviews-pagination,
-	.dataviews-filters__view-actions {
-		padding: $grid-unit-20 $grid-unit-30;
+	* {
+		--dataviews-padding-x: #{$grid-unit-30};
 	}
 
 	.dataviews-filters__view-actions {
@@ -818,19 +821,6 @@
 			}
 		}
 	}
-
-	.dataviews-view-table tr td:first-child, .dataviews-view-table tr th:first-child {
-		padding-left: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child, .dataviews-view-table tr th:last-child {
-		padding-right: $grid-unit-30;
-	}
-
-	.dataviews-view-grid {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 }
 
 .dataviews-bulk-actions-toolbar-wrapper {

From f466e326e6151520a79ae3b9fb5a046230faefb5 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 21 May 2024 13:59:56 +0100
Subject: [PATCH 13/17] Revert use of css vars

---
 packages/dataviews/src/style.scss | 34 ++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 64007f2351698..f267da95b3195 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -1,7 +1,3 @@
-:root {
-	--dataviews-padding-x: #{$grid-unit-60};
-}
-
 .dataviews-wrapper {
 	height: 100%;
 	overflow: auto;
@@ -14,7 +10,7 @@
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-20 var(--dataviews-padding-x);
+	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -51,7 +47,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-20 var(--dataviews-padding-x);
+	padding: $grid-unit-20 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
@@ -112,7 +108,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: var(--dataviews-padding-x);
+			padding-left: $grid-unit-60;
 
 			.dataviews-view-table-header-button {
 				margin-left: - #{$grid-unit-10};
@@ -121,7 +117,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: var(--dataviews-padding-x);
+			padding-right: $grid-unit-60;
 		}
 
 		&:last-child {
@@ -286,7 +282,7 @@
 	margin-bottom: auto;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 var(--dataviews-padding-x) $grid-unit-30;
+	padding: 0 $grid-unit-60 $grid-unit-30;
 
 	@include break-xlarge() {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -549,7 +545,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 var(--dataviews-padding-x);
+	padding: 0 $grid-unit-60;
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -808,8 +804,9 @@
 }
 
 @container (max-width: 430px) {
-	* {
-		--dataviews-padding-x: #{$grid-unit-30};
+	.dataviews-pagination,
+	.dataviews-filters__view-actions {
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 
 	.dataviews-filters__view-actions {
@@ -819,6 +816,19 @@
 			}
 		}
 	}
+
+	.dataviews-view-table tr td:first-child, .dataviews-view-table tr th:first-child {
+		padding-left: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child, .dataviews-view-table tr th:last-child {
+		padding-right: $grid-unit-30;
+	}
+
+	.dataviews-view-grid {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
 }
 
 .dataviews-bulk-actions-toolbar-wrapper {

From efb40c9f0f05f74d109168be9f71755658b0f9d1 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 21 May 2024 14:04:18 +0100
Subject: [PATCH 14/17] Fix patterns page header

---
 packages/edit-site/src/components/page-patterns/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 9784caf303b3b..544c88feb53d7 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -161,3 +161,10 @@
 		}
 	}
 }
+
+@container (max-width: 430px) { /* stylelint-disable -- '@container' not globally permitted */
+	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}

From 7f7de3bea629c36e0dd12a94fc87afbaec8b2b10 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 21 May 2024 15:40:17 +0100
Subject: [PATCH 15/17] Reduce animation speed

---
 packages/dataviews/src/style.scss                | 16 ++++++++++++++--
 .../edit-site/src/components/page/style.scss     |  4 ++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index f267da95b3195..67091db197025 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -14,7 +14,7 @@
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
-	transition: padding ease-out 0.2s;
+	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 
 	.components-search-control {
@@ -51,7 +51,7 @@
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
-	transition: padding ease-out 0.2s;
+	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 }
 
@@ -106,6 +106,14 @@
 			gap: $grid-unit-05;
 		}
 
+		th, td {
+			&:first-child,
+			&:last-child {
+				transition: padding ease-out 0.1s;
+				@include reduce-motion("transition");
+			}
+		}
+
 		td:first-child,
 		th:first-child {
 			padding-left: $grid-unit-60;
@@ -283,6 +291,8 @@
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 
 	@include break-xlarge() {
 		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -550,6 +560,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 }
 
 .dataviews-view-table-selection-checkbox {
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index ef49dd2465506..81e101cb1741b 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -2,7 +2,7 @@
 	color: $gray-800;
 	background: $white;
 	height: 100%;
-	container: edit-site-page / inline-size; /* stylelint-disable */
+	container: edit-site-page / inline-size; /* stylelint-disable -- '@container' not globally permitted */
 	transition: width ease-out 0.2s;
 	@include reduce-motion("transition");
 }
@@ -14,7 +14,7 @@
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	transition: padding ease-out 0.2s;
+	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 	.components-text {
 		color: $gray-800;

From b17ba83c0fabee4b406276c59ce43bcaefb26c4d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 22 May 2024 14:25:18 +0100
Subject: [PATCH 16/17] Update stylelint disabling

---
 packages/dataviews/src/style.scss                   | 13 +++++++++----
 .../src/components/page-patterns/style.scss         |  3 ++-
 packages/edit-site/src/components/page/style.scss   |  4 +++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 67091db197025..9cb7751f31534 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -3,7 +3,8 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
-	container: dataviews-wrapper / inline-size; /* stylelint-disable -- '@container' not globally permitted */
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
 	display: flex;
 	flex-direction: column;
 }
@@ -106,7 +107,8 @@
 			gap: $grid-unit-05;
 		}
 
-		th, td {
+		th,
+		td {
 			&:first-child,
 			&:last-child {
 				transition: padding ease-out 0.1s;
@@ -815,6 +817,7 @@
 	}
 }
 
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.dataviews-pagination,
 	.dataviews-filters__view-actions {
@@ -829,11 +832,13 @@
 		}
 	}
 
-	.dataviews-view-table tr td:first-child, .dataviews-view-table tr th:first-child {
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
 		padding-left: $grid-unit-30;
 	}
 
-	.dataviews-view-table tr td:last-child, .dataviews-view-table tr th:last-child {
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
 		padding-right: $grid-unit-30;
 	}
 
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 544c88feb53d7..a81a782a5c6bb 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -162,7 +162,8 @@
 	}
 }
 
-@container (max-width: 430px) { /* stylelint-disable -- '@container' not globally permitted */
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
 	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
 		padding-left: $grid-unit-30;
 		padding-right: $grid-unit-30;
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 81e101cb1741b..acf3a40d08b17 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -2,7 +2,8 @@
 	color: $gray-800;
 	background: $white;
 	height: 100%;
-	container: edit-site-page / inline-size; /* stylelint-disable -- '@container' not globally permitted */
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: edit-site-page / inline-size;
 	transition: width ease-out 0.2s;
 	@include reduce-motion("transition");
 }
@@ -28,6 +29,7 @@
 	}
 }
 
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.edit-site-page-header {
 		padding: $grid-unit-20 $grid-unit-30;

From 4145fe691c48a937afb81d81d6d0ccd945047531 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 23 May 2024 14:50:12 +0100
Subject: [PATCH 17/17] Address feedback

---
 packages/dataviews/src/style.scss                        | 9 +++++----
 .../edit-site/src/components/page-patterns/style.scss    | 2 ++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 9cb7751f31534..d4ee4ee356a1f 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -30,7 +30,6 @@
 		&,
 		&:hover {
 			opacity: 0;
-			padding: 0;
 		}
 
 		&:focus {
@@ -48,7 +47,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
 	flex-shrink: 0;
@@ -821,7 +820,7 @@
 @container (max-width: 430px) {
 	.dataviews-pagination,
 	.dataviews-filters__view-actions {
-		padding: $grid-unit-20 $grid-unit-30;
+		padding: $grid-unit-15 $grid-unit-30;
 	}
 
 	.dataviews-filters__view-actions {
@@ -842,7 +841,9 @@
 		padding-right: $grid-unit-30;
 	}
 
-	.dataviews-view-grid {
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
 		padding-left: $grid-unit-30;
 		padding-right: $grid-unit-30;
 	}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index a81a782a5c6bb..99587e6b16a78 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -105,6 +105,8 @@
 		top: 0;
 		z-index: 2;
 		flex-shrink: 0;
+		transition: padding ease-out 0.1s;
+		@include reduce-motion("transition");
 	}
 
 	.edit-site-patterns__pattern-title {