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/dataviews.js b/packages/dataviews/src/dataviews.js index 9bcf531006406a..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 (
- + - - { search && ( - - ) } - - - { [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) && - hasPossibleBulkAction && ( - - ) } - - + ) } + - - + + +
); } diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 278c4b06de3225..fc66305792db84 100644 --- a/packages/dataviews/src/style.scss +++ b/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 { @@ -49,13 +50,6 @@ margin: $grid-unit-40 0 $grid-unit-20; } -.dataviews-view-table-wrapper { - overflow-x: auto; - flex-grow: 1; - display: flex; - flex-direction: column; -} - .dataviews-view-table { width: 100%; text-indent: 0; @@ -149,17 +143,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; 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 ( -
+ <> { isLoading ? : __( 'No results' ) }

) } - + ); }