From 8d20341de20865ce1b1ef4d30fee4704c8337cb1 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 29 Feb 2024 12:28:36 +0000
Subject: [PATCH 1/5] Fix sticky table headers

---
 packages/dataviews/src/dataviews.js |  2 +-
 packages/dataviews/src/style.scss   | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index 9bcf531006406a..f368e9c155f448 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -92,7 +92,7 @@ export default function DataViews( {
 	);
 	return (
 		<div className="dataviews-wrapper">
-			<VStack spacing={ 3 } justify="flex-start">
+			<VStack spacing={ 0 } justify="flex-start">
 				<HStack
 					alignment="top"
 					justify="start"
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 7e45bec25856f7..0dd678417fd8fe 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -7,11 +7,17 @@
 
 	> div {
 		min-height: 100%;
+
+		&:has(.dataviews-view-table-wrapper) {
+			height: 100%;
+		}
 	}
 }
 
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
+	margin-bottom: $grid-unit-15;
+	flex-shrink: 0;
 	.components-search-control {
 		.components-base-control__field {
 			max-width: 240px;
@@ -36,6 +42,7 @@
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
+	flex-shrink: 0;
 }
 
 .dataviews-pagination__page-selection {
@@ -50,7 +57,7 @@
 }
 
 .dataviews-view-table-wrapper {
-	overflow-x: auto;
+	overflow: auto;
 }
 
 .dataviews-view-table {
@@ -146,17 +153,17 @@
 		}
 	}
 	thead {
+		position: sticky;
+		inset-block-start: 0;
+
 		tr {
 			border: 0;
 		}
 		th {
-			position: sticky;
-			top: -1px;
 			background-color: $white;
 			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
 			padding-top: $grid-unit-10;
 			padding-bottom: $grid-unit-10;
-			z-index: 1;
 			font-size: 11px;
 			text-transform: uppercase;
 			font-weight: 500;

From 4a84da54f16763a43ad04b10e7da09a09d9b4c9f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 29 Feb 2024 12:50:16 +0000
Subject: [PATCH 2/5] Pagination styles

---
 packages/dataviews/src/style.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 0dd678417fd8fe..6d7766a048520b 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -34,11 +34,9 @@
 }
 
 .dataviews-pagination {
-	margin-top: auto;
 	position: sticky;
 	bottom: 0;
-	background-color: rgba($white, 0.8);
-	backdrop-filter: blur(6px);
+	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;

From 3bb5198cfd55cc779d9fed12b09911b771ad36e8 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 4 Mar 2024 16:05:19 +0000
Subject: [PATCH 3/5] Fix z-index

---
 packages/base-styles/_z-index.scss | 3 +++
 packages/dataviews/src/style.scss  | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 762508f921a00f..fdf3ee586a9c35 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -203,6 +203,9 @@ $z-layers: (
 
 	// Ensure modal footer actions appear above modal contents
 	".edit-site-start-template-options__modal__actions": 1,
+
+	// Ensure checkbox + actions don't overlap table header
+	".dataviews-view-table thead": 1,
 );
 
 @function z-index( $key ) {
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index cda81fcab513d6..dc7c898ff62e74 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -153,6 +153,7 @@
 	thead {
 		position: sticky;
 		inset-block-start: 0;
+		z-index: z-index(".dataviews-view-table thead");
 
 		tr {
 			border: 0;

From eb16c3982517f6fe64a5d3129e432ce5cebe6a4b Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 5 Mar 2024 11:28:58 +0000
Subject: [PATCH 4/5] Remove unnecessary wrapper(s)

---
 packages/dataviews/src/dataviews.js  | 99 +++++++++++++---------------
 packages/dataviews/src/style.scss    | 16 ++---
 packages/dataviews/src/view-table.js |  4 +-
 3 files changed, 53 insertions(+), 66 deletions(-)

diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index f368e9c155f448..4ddaf2c2cca8cd 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
 
 /**
@@ -92,69 +89,67 @@ export default function DataViews( {
 	);
 	return (
 		<div className="dataviews-wrapper">
-			<VStack spacing={ 0 } justify="flex-start">
+			<HStack
+				alignment="top"
+				justify="start"
+				className="dataviews-filters__view-actions"
+			>
 				<HStack
-					alignment="top"
 					justify="start"
-					className="dataviews-filters__view-actions"
+					className="dataviews-filters__container"
+					wrap
 				>
-					<HStack
-						justify="start"
-						className="dataviews-filters__container"
-						wrap
-					>
-						{ search && (
-							<Search
-								label={ searchLabel }
-								view={ view }
-								onChangeView={ onChangeView }
-							/>
-						) }
-						<Filters
-							fields={ _fields }
+					{ search && (
+						<Search
+							label={ searchLabel }
 							view={ view }
 							onChangeView={ onChangeView }
-							openedFilter={ openedFilter }
-							setOpenedFilter={ setOpenedFilter }
 						/>
-					</HStack>
-					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-						hasPossibleBulkAction && (
-							<BulkActions
-								actions={ actions }
-								data={ data }
-								onSelectionChange={ onSetSelection }
-								selection={ selection }
-								getItemId={ getItemId }
-							/>
-						) }
-					<ViewActions
+					) }
+					<Filters
 						fields={ _fields }
 						view={ view }
 						onChangeView={ onChangeView }
-						supportedLayouts={ supportedLayouts }
+						openedFilter={ openedFilter }
+						setOpenedFilter={ setOpenedFilter }
 					/>
 				</HStack>
-				<ViewComponent
+				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+					hasPossibleBulkAction && (
+						<BulkActions
+							actions={ actions }
+							data={ data }
+							onSelectionChange={ onSetSelection }
+							selection={ selection }
+							getItemId={ getItemId }
+						/>
+					) }
+				<ViewActions
 					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
-					actions={ actions }
-					data={ data }
-					getItemId={ getItemId }
-					isLoading={ isLoading }
-					onSelectionChange={ onSetSelection }
-					onDetailsChange={ onDetailsChange }
-					selection={ selection }
-					deferredRendering={ deferredRendering }
-					setOpenedFilter={ setOpenedFilter }
-				/>
-				<Pagination
-					view={ view }
-					onChangeView={ onChangeView }
-					paginationInfo={ paginationInfo }
+					supportedLayouts={ supportedLayouts }
 				/>
-			</VStack>
+			</HStack>
+			<ViewComponent
+				fields={ _fields }
+				view={ view }
+				onChangeView={ onChangeView }
+				actions={ actions }
+				data={ data }
+				getItemId={ getItemId }
+				isLoading={ isLoading }
+				onSelectionChange={ onSetSelection }
+				onDetailsChange={ onDetailsChange }
+				selection={ selection }
+				deferredRendering={ deferredRendering }
+				setOpenedFilter={ setOpenedFilter }
+			/>
+			<Pagination
+				view={ view }
+				onChangeView={ onChangeView }
+				paginationInfo={ paginationInfo }
+			/>
 		</div>
 	);
 }
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index c943751f649465..686af93a1b925d 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -4,20 +4,15 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
-
-	> div {
-		min-height: 100%;
-
-		&:has(.dataviews-view-table-wrapper) {
-			height: 100%;
-		}
-	}
 }
 
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
 	margin-bottom: $grid-unit-15;
 	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+	
 	.components-search-control {
 		.components-base-control__field {
 			max-width: 240px;
@@ -36,6 +31,7 @@
 .dataviews-pagination {
 	position: sticky;
 	bottom: 0;
+	left: 0;
 	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
@@ -54,10 +50,6 @@
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
-.dataviews-view-table-wrapper {
-	overflow: auto;
-}
-
 .dataviews-view-table {
 	width: 100%;
 	text-indent: 0;
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index c77323d3c796d3..e121baa2b33f7c 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -356,7 +356,7 @@ function ViewTable( {
 	);
 
 	return (
-		<div className="dataviews-view-table-wrapper">
+		<>
 			<table
 				className="dataviews-view-table"
 				aria-busy={ isLoading }
@@ -468,7 +468,7 @@ function ViewTable( {
 					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
 				) }
 			</div>
-		</div>
+		</>
 	);
 }
 

From 2d3a0db6d0f870383391ed70b7195b5a4fcca39f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 5 Mar 2024 11:33:32 +0000
Subject: [PATCH 5/5] Linting error

---
 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 686af93a1b925d..fc66305792db84 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -12,7 +12,7 @@
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
-	
+
 	.components-search-control {
 		.components-base-control__field {
 			max-width: 240px;