Dataviews: Fix sticky table headers (#59467)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
# Conflicts:
#	packages/dataviews/src/style.scss

packages/base-styles/_z-index.scss

@@ -201,6 +201,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 ) {

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={ 3 } 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>
 	);
 }

packages/dataviews/src/style.scss

@@ -4,14 +4,15 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
-
-	> div {
-		min-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;
@@ -28,14 +29,14 @@
 }
 
 .dataviews-pagination {
-	margin-top: auto;
 	position: sticky;
 	bottom: 0;
-	background-color: rgba($white, 0.8);
-	backdrop-filter: blur(6px);
+	left: 0;
+	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
+	flex-shrink: 0;
 }
 
 .dataviews-pagination__page-selection {
@@ -146,17 +147,18 @@
 		}
 	}
 	thead {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: z-index(".dataviews-view-table thead");
+
 		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;

packages/dataviews/src/view-table.js

@@ -355,7 +355,7 @@ function ViewTable( {
 	);
 
 	return (
-		<div className="dataviews-view-table-wrapper">
+		<>
 			<table
 				className="dataviews-view-table"
 				aria-busy={ isLoading }
@@ -467,7 +467,7 @@ function ViewTable( {
 					<p>{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }</p>
 				) }
 			</div>
-		</div>
+		</>
 	);
 }