From 048ab873adbd04b2b844b893060c0938c631e7c5 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 5 Nov 2025 15:11:42 +1100
Subject: [PATCH 01/16] DataViewsPicker: Try a paddingX prop to override
 horizontal padding

---
 .../components/dataviews-footer/style.scss    | 20 ++--
 .../src/components/dataviews-picker/index.tsx | 17 +++-
 .../src/components/dataviews/index.tsx        | 17 +++-
 .../src/components/dataviews/style.scss       | 93 ++++++++++++-------
 .../src/stories/dataviews-picker.story.tsx    | 35 +++----
 5 files changed, 123 insertions(+), 59 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 9f22c42c2d6163..0be05d5419edb3 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -6,8 +6,8 @@
 	position: sticky;
 	bottom: 0;
 	left: 0;
-	background-color: inherit;
-	padding: $grid-unit-15 $grid-unit-60;
+	background-color: $white;
+	padding: $grid-unit-15 0;
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -18,12 +18,6 @@
 	z-index: z-index(".dataviews-footer");
 }
 
-@container (max-width: 430px) {
-	.dataviews-footer {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-}
-
 @container (max-width: 560px) {
 	.dataviews-footer {
 		flex-direction: column !important;
@@ -42,3 +36,13 @@
 		}
 	}
 }
+
+/**
+ * Apply custom padding-x from the wrapper to the footer.
+ */
+.dataviews-wrapper,
+.dataviews-picker-wrapper {
+	.dataviews-footer {
+		padding: $grid-unit-15 var(--dataviews-padding-x, $grid-unit-60);
+	}
+}
diff --git a/packages/dataviews/src/components/dataviews-picker/index.tsx b/packages/dataviews/src/components/dataviews-picker/index.tsx
index a97bb40825978f..70d2161a82a357 100644
--- a/packages/dataviews/src/components/dataviews-picker/index.tsx
+++ b/packages/dataviews/src/components/dataviews-picker/index.tsx
@@ -63,6 +63,7 @@ type DataViewsPickerProps< Item > = {
 	};
 	itemListLabel?: string;
 	empty?: ReactNode;
+	paddingX?: string | number;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -128,6 +129,7 @@ function DataViewsPicker< Item >( {
 	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	itemListLabel,
 	empty,
+	paddingX,
 }: DataViewsPickerProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
 	const containerRef = useRef< HTMLDivElement | null >( null );
@@ -242,7 +244,20 @@ function DataViewsPicker< Item >( {
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>
-			<div className="dataviews-picker-wrapper" ref={ containerRef }>
+			<div
+				className="dataviews-picker-wrapper"
+				style={
+					paddingX !== undefined
+						? ( {
+								'--dataviews-padding-x':
+									typeof paddingX === 'number'
+										? `${ paddingX }px`
+										: paddingX,
+						  } as React.CSSProperties )
+						: undefined
+				}
+				ref={ containerRef }
+			>
 				{ children ?? (
 					<DefaultUI search={ search } searchLabel={ searchLabel } />
 				) }
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 07cda5d91bd9b7..fd66fcdbc05f91 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -66,6 +66,7 @@ type DataViewsProps< Item > = {
 		perPageSizes: number[];
 	};
 	empty?: ReactNode;
+	paddingX?: string | number;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -142,6 +143,7 @@ function DataViews< Item >( {
 	children,
 	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	empty,
+	paddingX,
 }: DataViewsProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
 	const containerRef = useRef< HTMLDivElement | null >( null );
@@ -271,7 +273,20 @@ function DataViews< Item >( {
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>
-			<div className="dataviews-wrapper" ref={ containerRef }>
+			<div
+				className="dataviews-wrapper"
+				style={
+					paddingX !== undefined
+						? ( {
+								'--dataviews-padding-x':
+									typeof paddingX === 'number'
+										? `${ paddingX }px`
+										: paddingX,
+						  } as React.CSSProperties )
+						: undefined
+				}
+				ref={ containerRef }
+			>
 				{ children ?? (
 					<DefaultUI
 						header={ header }
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 32de6515cb89da..9d550164973fe9 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -14,51 +14,78 @@
 	flex-direction: column;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
-	background-color: inherit;
-}
+	--dataviews-padding-x: #{$grid-unit-60};
 
-.dataviews__view-actions,
-.dataviews-filters__container {
-	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
-	flex-shrink: 0;
-	position: sticky;
-	left: 0;
-	background-color: inherit;
-
-	@media not (prefers-reduced-motion) {
-		transition: padding ease-out 0.1s;
-	}
-}
+	@container (max-width: 430px) {
+		--dataviews-padding-x: #{$grid-unit-30};
 
-.dataviews-no-results,
-.dataviews-loading {
-	padding: 0 $grid-unit-60;
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+		.dataviews__view-actions,
+		.dataviews-filters__container {
+			padding: $grid-unit-15 var(--dataviews-padding-x);
+		}
 
-	@media not (prefers-reduced-motion) {
-		transition: padding ease-out 0.1s;
+		.dataviews-view-grid,
+		.dataviews-view-grid-items {
+			padding: 0 var(--dataviews-padding-x) $grid-unit-30;
+		}
 	}
-}
-
-.dataviews-loading-more {
-	text-align: center;
-}
 
-@container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {
-		padding: $grid-unit-15 $grid-unit-30;
+		box-sizing: border-box;
+		padding: $grid-unit-20 var(--dataviews-padding-x);
+		flex-shrink: 0;
+		position: sticky;
+		left: 0;
+
+		@media not (prefers-reduced-motion) {
+			transition: padding ease-out 0.1s;
+		}
 	}
 
 	.dataviews-no-results,
 	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
+		padding: 0 var(--dataviews-padding-x);
+		flex-grow: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		@media not (prefers-reduced-motion) {
+			transition: padding ease-out 0.1s;
+		}
 	}
+
+	.dataviews-view-grid,
+	.dataviews-view-grid-items {
+		padding: 0 var(--dataviews-padding-x) $grid-unit-30;
+	}
+
+	.dataviews-view-grid__group-header {
+		padding: 0 var(--dataviews-padding-x);
+	}
+
+	.dataviews-view-list__item-wrapper {
+		padding: $grid-unit-20 var(--dataviews-padding-x);
+	}
+
+	.dataviews-view-list__group-header {
+		padding: 0 var(--dataviews-padding-x);
+	}
+
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-left: var(--dataviews-padding-x);
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-right: var(--dataviews-padding-x);
+	}
+}
+
+.dataviews-loading-more {
+	text-align: center;
 }
 
 .dataviews-title-field {
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 1da4c654d3e8e7..21fd7ed110ff8b 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -17,7 +17,7 @@ import {
  * Internal dependencies
  */
 import DataViewsPicker from '../components/dataviews-picker/index';
-import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../constants';
+import { LAYOUT_PICKER_GRID } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { ActionButton, View } from '../types';
 import { data, fields, type SpaceObject } from './dataviews.fixtures';
@@ -33,7 +33,6 @@ const storyArgs = {
 	perPageSizes: [ 10, 25, 50, 100 ],
 	isMultiselectable: false,
 	isGrouped: false,
-	infiniteScrollEnabled: false,
 };
 
 const storyArgTypes = {
@@ -63,6 +62,7 @@ interface PickerContentProps {
 	infiniteScrollEnabled: boolean;
 	actions?: ActionButton< SpaceObject >[];
 	selection?: string[];
+	paddingX?: string | number;
 }
 
 const DataViewsPickerContent = ( {
@@ -72,8 +72,10 @@ const DataViewsPickerContent = ( {
 	infiniteScrollEnabled,
 	actions: customActions,
 	selection: customSelection,
+	paddingX,
 }: PickerContentProps ) => {
 	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_PICKER_GRID,
 		fields: [],
 		titleField: 'title',
 		mediaField: 'image',
@@ -81,8 +83,7 @@ const DataViewsPickerContent = ( {
 		page: 1,
 		perPage: 10,
 		filters: [],
-		type: LAYOUT_PICKER_GRID,
-		groupBy: isGrouped ? { field: 'type', direction: 'asc' } : undefined,
+		groupByField: isGrouped ? 'type' : undefined,
 		infiniteScrollEnabled,
 	} );
 	const { data: shownData, paginationInfo: normalPaginationInfo } =
@@ -93,10 +94,8 @@ const DataViewsPickerContent = ( {
 	useEffect( () => {
 		setView( ( prevView ) => ( {
 			...prevView,
-			groupBy:
-				isGrouped && ! infiniteScrollEnabled
-					? { field: 'type', direction: 'asc' }
-					: undefined,
+			groupByField:
+				isGrouped && ! infiniteScrollEnabled ? 'type' : undefined,
 			infiniteScrollEnabled,
 		} ) );
 	}, [ isGrouped, infiniteScrollEnabled ] );
@@ -141,14 +140,13 @@ const DataViewsPickerContent = ( {
 		setView,
 		data: shownData,
 		getItemId: ( item ) => item.id.toString(),
-		totalDataLength: data.length,
 	} );
 
 	return (
 		<>
 			{ infiniteScrollEnabled && (
 				<style>{ `
-					.dataviews-picker-wrapper {
+					.dataviews-wrapper {
 						height: 600px;
 						overflow: auto;
 					}
@@ -175,8 +173,8 @@ const DataViewsPickerContent = ( {
 				itemListLabel="Galactic Bodies"
 				defaultLayouts={ {
 					[ LAYOUT_PICKER_GRID ]: {},
-					[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
 				} }
+				paddingX={ paddingX }
 			/>
 		</>
 	);
@@ -241,6 +239,11 @@ export const WithModal = ( {
 
 	return (
 		<>
+			<style>{ `
+				.dataviews-picker-modal .components-modal__content {
+					padding: 0;
+				}
+			` }</style>
 			<HStack justify="left">
 				<Button
 					variant="primary"
@@ -270,6 +273,7 @@ export const WithModal = ( {
 					onRequestClose={ () => setIsModalOpen( false ) }
 					isFullScreen={ false }
 					size="fill"
+					className="dataviews-picker-modal"
 				>
 					<DataViewsPickerContent
 						perPageSizes={ perPageSizes }
@@ -280,6 +284,7 @@ export const WithModal = ( {
 						selection={ selectedItems.map( ( item ) =>
 							String( item.id )
 						) }
+						paddingX={ 32 }
 					/>
 				</Modal>
 			) }
@@ -295,13 +300,11 @@ function useInfiniteScroll( {
 	setView,
 	data: shownData,
 	getItemId,
-	totalDataLength,
 }: {
 	view: View;
 	setView: ( view: View ) => void;
 	data: SpaceObject[];
 	getItemId: ( item: SpaceObject ) => string;
-	totalDataLength: number;
 } ): {
 	data: SpaceObject[];
 	paginationInfo: {
@@ -318,8 +321,8 @@ function useInfiniteScroll( {
 	);
 	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
 
-	const totalItems = totalDataLength;
-	const totalPages = Math.ceil( totalItems / ( view.perPage || 10 ) );
+	const totalItems = data.length;
+	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
 	const currentPage = view.page || 1;
 	const hasMoreData = currentPage < totalPages;
 
@@ -334,7 +337,7 @@ function useInfiniteScroll( {
 			...view,
 			page: currentPage + 1,
 		} );
-	}, [ isLoadingMore, currentPage, totalPages, view, setView ] );
+	}, [ isLoadingMore, currentPage, totalPages, view ] );
 
 	// Initialize data on first load or when view changes significantly
 	useEffect( () => {

From 1d54d9342d14091d6d187152417bdfffed48c18d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 5 Nov 2025 15:23:03 +1100
Subject: [PATCH 02/16] Tidy up CSS changes

---
 .../components/dataviews-footer/style.scss    |  2 +-
 .../src/components/dataviews/style.scss       | 52 ++++---------------
 .../src/dataviews-layouts/grid/style.scss     |  6 +--
 .../src/dataviews-layouts/list/style.scss     |  4 +-
 .../dataviews-layouts/picker-grid/style.scss  |  2 +-
 .../src/dataviews-layouts/table/style.scss    |  8 +--
 .../dataviews-layouts/utils/grid-items.scss   |  6 +--
 7 files changed, 25 insertions(+), 55 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 0be05d5419edb3..6b80e6e69e02d2 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -43,6 +43,6 @@
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	.dataviews-footer {
-		padding: $grid-unit-15 var(--dataviews-padding-x, $grid-unit-60);
+		padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-60});
 	}
 }
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 9d550164973fe9..0cfa3bce79c657 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -14,26 +14,11 @@
 	flex-direction: column;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
-	--dataviews-padding-x: #{$grid-unit-60};
-
-	@container (max-width: 430px) {
-		--dataviews-padding-x: #{$grid-unit-30};
-
-		.dataviews__view-actions,
-		.dataviews-filters__container {
-			padding: $grid-unit-15 var(--dataviews-padding-x);
-		}
-
-		.dataviews-view-grid,
-		.dataviews-view-grid-items {
-			padding: 0 var(--dataviews-padding-x) $grid-unit-30;
-		}
-	}
 
 	.dataviews__view-actions,
 	.dataviews-filters__container {
 		box-sizing: border-box;
-		padding: $grid-unit-20 var(--dataviews-padding-x);
+		padding: $grid-unit-20 var(--dataviews-padding-x, #{$grid-unit-60});
 		flex-shrink: 0;
 		position: sticky;
 		left: 0;
@@ -45,7 +30,7 @@
 
 	.dataviews-no-results,
 	.dataviews-loading {
-		padding: 0 var(--dataviews-padding-x);
+		padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
 		flex-grow: 1;
 		display: flex;
 		align-items: center;
@@ -56,31 +41,16 @@
 		}
 	}
 
-	.dataviews-view-grid,
-	.dataviews-view-grid-items {
-		padding: 0 var(--dataviews-padding-x) $grid-unit-30;
-	}
-
-	.dataviews-view-grid__group-header {
-		padding: 0 var(--dataviews-padding-x);
-	}
-
-	.dataviews-view-list__item-wrapper {
-		padding: $grid-unit-20 var(--dataviews-padding-x);
-	}
-
-	.dataviews-view-list__group-header {
-		padding: 0 var(--dataviews-padding-x);
-	}
-
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-left: var(--dataviews-padding-x);
-	}
+	@container (max-width: 430px) {
+		.dataviews__view-actions,
+		.dataviews-filters__container {
+			padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-30});
+		}
 
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-right: var(--dataviews-padding-x);
+		.dataviews-no-results,
+		.dataviews-loading {
+			padding: 0 var(--dataviews-padding-x, #{$grid-unit-30});
+		}
 	}
 }
 
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 69a461c23112d3..4a34e744a21a70 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -183,11 +183,11 @@
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-60;
+	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
 	container-type: inline-size;
 
 	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
+		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
 	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
index ebab5c67049b36..27d5e706933833 100644
--- a/packages/dataviews/src/dataviews-layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -15,7 +15,7 @@ div.dataviews-view-list {
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			padding: $grid-unit-20 $grid-unit-30;
+			padding: $grid-unit-20 var(--dataviews-padding-x, #{$grid-unit-30});
 			box-sizing: border-box;
 		}
 
@@ -206,5 +206,5 @@ div.dataviews-view-list {
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-30;
+	padding: 0 var(--dataviews-padding-x, #{$grid-unit-30});
 }
diff --git a/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss b/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
index 2d99e03b982290..c0d7ef6e5e2ba3 100644
--- a/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
@@ -171,5 +171,5 @@
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-60;
+	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
 }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 3a77fba12fd80d..4f24caa3c631b2 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -65,7 +65,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-60;
+			padding-left: var(--dataviews-padding-x, #{$grid-unit-60});
 
 			.dataviews-view-table-header-button {
 				margin-left: - #{$grid-unit-10};
@@ -74,7 +74,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-60;
+			padding-right: var(--dataviews-padding-x, #{$grid-unit-60});
 		}
 
 		&:last-child {
@@ -253,12 +253,12 @@
 @container (max-width: 430px) {
 	.dataviews-view-table tr td:first-child,
 	.dataviews-view-table tr th:first-child {
-		padding-left: $grid-unit-30;
+		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
 	}
 
 	.dataviews-view-table tr td:last-child,
 	.dataviews-view-table tr th:last-child {
-		padding-right: $grid-unit-30;
+		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
 	}
 }
 
diff --git a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
index 72d87f63dba161..b6af04ed878f91 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
+++ b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
@@ -6,15 +6,15 @@
 	gap: $grid-unit-40;
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-	padding: 0 $grid-unit-60 $grid-unit-30;
+	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60}) $grid-unit-30;
 	container-type: inline-size;
 	/**
 		* Breakpoints were adjusted from media queries breakpoints to account for
 		* the sidebar width. This was done to match the existing styles we had.
 		*/
 	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
+		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
 	}
 
 	@media not (prefers-reduced-motion) {

From 26dedaad639efafafea3d6e079685fe713e3d028 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 5 Nov 2025 15:34:14 +1100
Subject: [PATCH 03/16] Tidy up a little further

---
 .../components/dataviews-footer/style.scss    | 18 ++++-
 .../src/components/dataviews/style.scss       | 65 ++++++++++---------
 2 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 6b80e6e69e02d2..c8b928ce3a8e44 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -7,7 +7,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 0;
+	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -18,6 +18,12 @@
 	z-index: z-index(".dataviews-footer");
 }
 
+@container (max-width: 430px) {
+	.dataviews-footer {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+}
+
 @container (max-width: 560px) {
 	.dataviews-footer {
 		flex-direction: column !important;
@@ -43,6 +49,14 @@
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	.dataviews-footer {
-		padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-60});
+		padding-left: var(--dataviews-padding-x, #{$grid-unit-60});
+		padding-right: var(--dataviews-padding-x, #{$grid-unit-60});
+	}
+
+	@container (max-width: 430px) {
+		.dataviews-footer {
+			padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
+			padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
+		}
 	}
 }
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 0cfa3bce79c657..be8c46b3916063 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -14,43 +14,31 @@
 	flex-direction: column;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
+}
 
-	.dataviews__view-actions,
-	.dataviews-filters__container {
-		box-sizing: border-box;
-		padding: $grid-unit-20 var(--dataviews-padding-x, #{$grid-unit-60});
-		flex-shrink: 0;
-		position: sticky;
-		left: 0;
-
-		@media not (prefers-reduced-motion) {
-			transition: padding ease-out 0.1s;
-		}
-	}
+.dataviews__view-actions,
+.dataviews-filters__container {
+	box-sizing: border-box;
+	padding: $grid-unit-20 var(--dataviews-padding-x, #{$grid-unit-60});
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
 
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
-		flex-grow: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		@media not (prefers-reduced-motion) {
-			transition: padding ease-out 0.1s;
-		}
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
 	}
+}
 
-	@container (max-width: 430px) {
-		.dataviews__view-actions,
-		.dataviews-filters__container {
-			padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-30});
-		}
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
-		.dataviews-no-results,
-		.dataviews-loading {
-			padding: 0 var(--dataviews-padding-x, #{$grid-unit-30});
-		}
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
 	}
 }
 
@@ -58,6 +46,19 @@
 	text-align: center;
 }
 
+@container (max-width: 430px) {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
+		padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-30});
+	}
+
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
+	}
+}
+
 .dataviews-title-field {
 	font-size: $default-font-size;
 	font-weight: $font-weight-medium;

From e7fd383d47bffef814aafda51025270a1afc1813 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 5 Nov 2025 15:37:12 +1100
Subject: [PATCH 04/16] Tidy up a little further

---
 .../components/dataviews-footer/style.scss    | 22 ++-----------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index c8b928ce3a8e44..78f551ea9e634e 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -7,7 +7,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-60;
+	padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-60});
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -20,7 +20,7 @@
 
 @container (max-width: 430px) {
 	.dataviews-footer {
-		padding: $grid-unit-15 $grid-unit-30;
+		padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-30});
 	}
 }
 
@@ -42,21 +42,3 @@
 		}
 	}
 }
-
-/**
- * Apply custom padding-x from the wrapper to the footer.
- */
-.dataviews-wrapper,
-.dataviews-picker-wrapper {
-	.dataviews-footer {
-		padding-left: var(--dataviews-padding-x, #{$grid-unit-60});
-		padding-right: var(--dataviews-padding-x, #{$grid-unit-60});
-	}
-
-	@container (max-width: 430px) {
-		.dataviews-footer {
-			padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
-			padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
-		}
-	}
-}

From a91231dfa46018ca5c3222364637e68448e294b6 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 20 Nov 2025 17:40:43 +1100
Subject: [PATCH 05/16] Try a padding prop with controlled values

---
 .../components/dataviews-footer/style.scss    |   8 +-
 .../dataviews-picker/get-padding-by-size.ts   | 108 ++++++++++++++++++
 .../src/components/dataviews-picker/index.tsx |  26 +++--
 .../src/components/dataviews-picker/types.ts  |  30 +++++
 .../src/components/dataviews/index.tsx        |  26 +++--
 .../src/components/dataviews/style.scss       |  28 ++++-
 .../src/dataviews-layouts/grid/style.scss     |   8 +-
 .../src/dataviews-layouts/list/style.scss     |   8 +-
 .../dataviews-layouts/picker-grid/style.scss  |   4 +-
 .../src/dataviews-layouts/table/style.scss    |  10 +-
 .../dataviews-layouts/utils/grid-items.scss   |   9 +-
 .../src/stories/dataviews-picker.story.tsx    |  18 +--
 12 files changed, 230 insertions(+), 53 deletions(-)
 create mode 100644 packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
 create mode 100644 packages/dataviews/src/components/dataviews-picker/types.ts

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 78f551ea9e634e..c6461ed2b56d53 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -7,7 +7,9 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-60});
+	padding-block: $grid-unit-15;
+	padding-inline-start: var(--dataviews-padding-inline-start);
+	padding-inline-end: var(--dataviews-padding-inline-end);
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -20,7 +22,9 @@
 
 @container (max-width: 430px) {
 	.dataviews-footer {
-		padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-block: $grid-unit-15;
+		padding-inline-start: var(--dataviews-padding-inline-start);
+		padding-inline-end: var(--dataviews-padding-inline-end);
 	}
 }
 
diff --git a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
new file mode 100644
index 00000000000000..64454d887f7260
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import type { PaddingSize, PaddingOptions, DimensionVariant } from './types';
+
+/**
+ * Maps padding size tokens to CSS values.
+ * Aligned with the Card component's spacing scale (space function with 4px base):
+ * - x-small: space(2) = 8px
+ * - small: space(4) = 16px
+ * - medium: space(6) = 24px
+ * - large: space(8) = 32px
+ * - extra-large: space(12) = 48px
+ */
+const paddingValuesBySize: Record< PaddingSize, string > = {
+	'x-small': '8px',
+	small: '16px',
+	medium: '24px',
+	large: '32px',
+	'extra-large': '48px',
+	none: '0',
+};
+
+/**
+ * Gets the CSS value for a single padding size token.
+ *
+ * @param size The padding size token.
+ * @return The CSS value for the padding size.
+ */
+function getSinglePaddingValue( size: PaddingSize ): string {
+	return paddingValuesBySize[ size ];
+}
+
+/**
+ * Converts padding options into CSS custom property style values.
+ * Returns an object with the appropriate CSS custom properties set.
+ * When padding is undefined, returns an empty object to allow SCSS
+ * defaults and container queries to apply.
+ *
+ * @param padding The padding option (single size or directional variants), or undefined to use SCSS defaults
+ * @return An object with CSS custom property values, or empty object to use SCSS defaults
+ */
+export function getPaddingBySizeStyles(
+	padding: PaddingOptions | undefined
+): Record< string, string > {
+	const styles: Record< string, string > = {};
+
+	// Handle string-based sizes (single value applied to all directional variants)
+	if ( typeof padding === 'string' ) {
+		const value = getSinglePaddingValue( padding );
+		styles[ '--dataviews-padding-block-start' ] = value;
+		styles[ '--dataviews-padding-block-end' ] = value;
+		styles[ '--dataviews-padding-inline-start' ] = value;
+		styles[ '--dataviews-padding-inline-end' ] = value;
+		return styles;
+	}
+
+	// If no padding specified, return empty object to use SCSS defaults
+	if ( ! padding ) {
+		return styles;
+	}
+
+	// Handle object with directional variants
+	const { block, blockStart, blockEnd, inline, inlineStart, inlineEnd } =
+		padding as DimensionVariant< PaddingSize >;
+
+	if ( block !== undefined ) {
+		const value = getSinglePaddingValue( block );
+		if ( blockStart === undefined ) {
+			styles[ '--dataviews-padding-block-start' ] = value;
+		}
+		if ( blockEnd === undefined ) {
+			styles[ '--dataviews-padding-block-end' ] = value;
+		}
+	}
+
+	if ( blockStart !== undefined ) {
+		styles[ '--dataviews-padding-block-start' ] =
+			getSinglePaddingValue( blockStart );
+	}
+
+	if ( blockEnd !== undefined ) {
+		styles[ '--dataviews-padding-block-end' ] =
+			getSinglePaddingValue( blockEnd );
+	}
+
+	if ( inline !== undefined ) {
+		const value = getSinglePaddingValue( inline );
+		if ( inlineStart === undefined ) {
+			styles[ '--dataviews-padding-inline-start' ] = value;
+		}
+		if ( inlineEnd === undefined ) {
+			styles[ '--dataviews-padding-inline-end' ] = value;
+		}
+	}
+
+	if ( inlineStart !== undefined ) {
+		styles[ '--dataviews-padding-inline-start' ] =
+			getSinglePaddingValue( inlineStart );
+	}
+
+	if ( inlineEnd !== undefined ) {
+		styles[ '--dataviews-padding-inline-end' ] =
+			getSinglePaddingValue( inlineEnd );
+	}
+
+	return styles;
+}
diff --git a/packages/dataviews/src/components/dataviews-picker/index.tsx b/packages/dataviews/src/components/dataviews-picker/index.tsx
index 70d2161a82a357..3d952618b889e9 100644
--- a/packages/dataviews/src/components/dataviews-picker/index.tsx
+++ b/packages/dataviews/src/components/dataviews-picker/index.tsx
@@ -32,6 +32,8 @@ import DataViewsViewConfig, {
 import normalizeFields from '../../field-types/utils/normalize-fields';
 import type { ActionButton, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../types/private';
+import type { PaddingOptions } from './types';
+import { getPaddingBySizeStyles } from './get-padding-by-size';
 type ItemWithId = { id: string };
 
 const isItemClickable = () => false;
@@ -63,7 +65,11 @@ type DataViewsPickerProps< Item > = {
 	};
 	itemListLabel?: string;
 	empty?: ReactNode;
-	paddingX?: string | number;
+	/**
+	 * Determines the amount of padding within the component.
+	 * When not provided, the default SCSS padding values are used.
+	 */
+	padding?: PaddingOptions;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -129,7 +135,7 @@ function DataViewsPicker< Item >( {
 	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	itemListLabel,
 	empty,
-	paddingX,
+	padding,
 }: DataViewsPickerProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
 	const containerRef = useRef< HTMLDivElement | null >( null );
@@ -211,6 +217,11 @@ function DataViewsPicker< Item >( {
 		[ defaultLayoutsProperty ]
 	);
 
+	const paddingStyles = useMemo(
+		() => getPaddingBySizeStyles( padding ),
+		[ padding ]
+	);
+
 	if ( ! defaultLayouts[ view.type ] ) {
 		return null;
 	}
@@ -246,16 +257,7 @@ function DataViewsPicker< Item >( {
 		>
 			<div
 				className="dataviews-picker-wrapper"
-				style={
-					paddingX !== undefined
-						? ( {
-								'--dataviews-padding-x':
-									typeof paddingX === 'number'
-										? `${ paddingX }px`
-										: paddingX,
-						  } as React.CSSProperties )
-						: undefined
-				}
+				style={ paddingStyles as React.CSSProperties }
 				ref={ containerRef }
 			>
 				{ children ?? (
diff --git a/packages/dataviews/src/components/dataviews-picker/types.ts b/packages/dataviews/src/components/dataviews-picker/types.ts
new file mode 100644
index 00000000000000..25df8d3b434d3d
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-picker/types.ts
@@ -0,0 +1,30 @@
+/**
+ * Size token for padding.
+ * Aligned with the Card component's spacing scale (4px base grid).
+ */
+export type PaddingSize =
+	| 'x-small'
+	| 'small'
+	| 'medium'
+	| 'large'
+	| 'extra-large'
+	| 'none';
+
+/**
+ * Dimension variant that allows directional specification using logical CSS properties.
+ * Supports both block (vertical) and inline (horizontal) directions, with optional start/end variants.
+ */
+export type DimensionVariant< T > = {
+	block?: T;
+	blockStart?: T;
+	blockEnd?: T;
+	inline?: T;
+	inlineStart?: T;
+	inlineEnd?: T;
+};
+
+/**
+ * Padding options for DataViewsPicker.
+ * Can be either a single padding size token or an object with directional variants.
+ */
+export type PaddingOptions = PaddingSize | DimensionVariant< PaddingSize >;
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index fd66fcdbc05f91..06350b49525a0f 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -33,6 +33,8 @@ import DataViewsViewConfig, {
 import normalizeFields from '../../field-types/utils/normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../types/private';
+import type { PaddingOptions } from '../dataviews-picker/types';
+import { getPaddingBySizeStyles } from '../dataviews-picker/get-padding-by-size';
 type ItemWithId = { id: string };
 
 type DataViewsProps< Item > = {
@@ -66,7 +68,11 @@ type DataViewsProps< Item > = {
 		perPageSizes: number[];
 	};
 	empty?: ReactNode;
-	paddingX?: string | number;
+	/**
+	 * Determines the amount of padding within the component.
+	 * When not provided, the default SCSS padding values are used.
+	 */
+	padding?: PaddingOptions;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -143,7 +149,7 @@ function DataViews< Item >( {
 	children,
 	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	empty,
-	paddingX,
+	padding,
 }: DataViewsProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
 	const containerRef = useRef< HTMLDivElement | null >( null );
@@ -238,6 +244,11 @@ function DataViews< Item >( {
 		[ defaultLayoutsProperty ]
 	);
 
+	const paddingStyles = useMemo(
+		() => getPaddingBySizeStyles( padding ),
+		[ padding ]
+	);
+
 	if ( ! defaultLayouts[ view.type ] ) {
 		return null;
 	}
@@ -275,16 +286,7 @@ function DataViews< Item >( {
 		>
 			<div
 				className="dataviews-wrapper"
-				style={
-					paddingX !== undefined
-						? ( {
-								'--dataviews-padding-x':
-									typeof paddingX === 'number'
-										? `${ paddingX }px`
-										: paddingX,
-						  } as React.CSSProperties )
-						: undefined
-				}
+				style={ paddingStyles as React.CSSProperties }
 				ref={ containerRef }
 			>
 				{ children ?? (
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index be8c46b3916063..998bd979e504af 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -14,15 +14,26 @@
 	flex-direction: column;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
+	background-color: inherit;
+	--dataviews-padding-inline-start: #{$grid-unit-60};
+	--dataviews-padding-inline-end: #{$grid-unit-60};
+
+	@container (max-width: 430px) {
+		--dataviews-padding-inline-start: #{$grid-unit-30};
+		--dataviews-padding-inline-end: #{$grid-unit-30};
+	}
 }
 
 .dataviews__view-actions,
 .dataviews-filters__container {
 	box-sizing: border-box;
-	padding: $grid-unit-20 var(--dataviews-padding-x, #{$grid-unit-60});
+	padding-block: $grid-unit-20;
+	padding-inline-start: var(--dataviews-padding-inline-start);
+	padding-inline-end: var(--dataviews-padding-inline-end);
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
+	background-color: inherit;
 
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;
@@ -31,7 +42,9 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
+	padding-block: 0;
+	padding-inline-start: var(--dataviews-padding-inline-start);
+	padding-inline-end: var(--dataviews-padding-inline-end);
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -49,13 +62,15 @@
 @container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {
-		padding: $grid-unit-15 var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-block: $grid-unit-15;
+		padding-inline-start: var(--dataviews-padding-inline-start);
+		padding-inline-end: var(--dataviews-padding-inline-end);
 	}
 
 	.dataviews-no-results,
 	.dataviews-loading {
-		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
-		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-inline-start: var(--dataviews-padding-inline-start);
+		padding-inline-end: var(--dataviews-padding-inline-end);
 	}
 }
 
@@ -120,7 +135,8 @@
 	.dataviews-view-grid,
 	.dataviews-loading,
 	.dataviews-no-results {
-		padding-inline: $grid-unit-30;
+		padding-inline-start: $grid-unit-30;
+		padding-inline-end: $grid-unit-30;
 	}
 
 	.dataviews-view-table tr td:first-child,
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 4a34e744a21a70..6f7988fc3d7e04 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -183,11 +183,13 @@
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
+	padding-block: 0;
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
 	container-type: inline-size;
 
 	@container (max-width: 430px) {
-		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
-		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
index 27d5e706933833..86ae7a76265bb0 100644
--- a/packages/dataviews/src/dataviews-layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -15,7 +15,9 @@ div.dataviews-view-list {
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			padding: $grid-unit-20 var(--dataviews-padding-x, #{$grid-unit-30});
+			padding-block: $grid-unit-20;
+			padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+			padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 			box-sizing: border-box;
 		}
 
@@ -206,5 +208,7 @@ div.dataviews-view-list {
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 var(--dataviews-padding-x, #{$grid-unit-30});
+	padding-block: 0;
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 }
diff --git a/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss b/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
index c0d7ef6e5e2ba3..a40ef98659f48a 100644
--- a/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
@@ -171,5 +171,7 @@
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60});
+	padding-block: 0;
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
 }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 4f24caa3c631b2..0e0aed3c6aee07 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -65,16 +65,16 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: var(--dataviews-padding-x, #{$grid-unit-60});
+			padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
 
 			.dataviews-view-table-header-button {
-				margin-left: - #{$grid-unit-10};
+				margin-inline-start: - #{$grid-unit-10};
 			}
 		}
 
 		td:last-child,
 		th:last-child {
-			padding-right: var(--dataviews-padding-x, #{$grid-unit-60});
+			padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
 		}
 
 		&:last-child {
@@ -253,12 +253,12 @@
 @container (max-width: 430px) {
 	.dataviews-view-table tr td:first-child,
 	.dataviews-view-table tr th:first-child {
-		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
 	}
 
 	.dataviews-view-table tr td:last-child,
 	.dataviews-view-table tr th:last-child {
-		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
 
diff --git a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
index b6af04ed878f91..6a0a1952d225ad 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
+++ b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
@@ -6,15 +6,18 @@
 	gap: $grid-unit-40;
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-	padding: 0 var(--dataviews-padding-x, #{$grid-unit-60}) $grid-unit-30;
+	padding-block-start: 0;
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-block-end: $grid-unit-30;
 	container-type: inline-size;
 	/**
 		* Breakpoints were adjusted from media queries breakpoints to account for
 		* the sidebar width. This was done to match the existing styles we had.
 		*/
 	@container (max-width: 430px) {
-		padding-left: var(--dataviews-padding-x, #{$grid-unit-30});
-		padding-right: var(--dataviews-padding-x, #{$grid-unit-30});
+		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 
 	@media not (prefers-reduced-motion) {
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 21fd7ed110ff8b..a4b126391f5c6e 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -17,9 +17,10 @@ import {
  * Internal dependencies
  */
 import DataViewsPicker from '../components/dataviews-picker/index';
-import { LAYOUT_PICKER_GRID } from '../constants';
+import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { ActionButton, View } from '../types';
+import type { PaddingOptions } from '../components/dataviews-picker/types';
 import { data, fields, type SpaceObject } from './dataviews.fixtures';
 
 const meta = {
@@ -62,7 +63,7 @@ interface PickerContentProps {
 	infiniteScrollEnabled: boolean;
 	actions?: ActionButton< SpaceObject >[];
 	selection?: string[];
-	paddingX?: string | number;
+	padding?: PaddingOptions;
 }
 
 const DataViewsPickerContent = ( {
@@ -72,7 +73,7 @@ const DataViewsPickerContent = ( {
 	infiniteScrollEnabled,
 	actions: customActions,
 	selection: customSelection,
-	paddingX,
+	padding: customPadding,
 }: PickerContentProps ) => {
 	const [ view, setView ] = useState< View >( {
 		type: LAYOUT_PICKER_GRID,
@@ -83,7 +84,7 @@ const DataViewsPickerContent = ( {
 		page: 1,
 		perPage: 10,
 		filters: [],
-		groupByField: isGrouped ? 'type' : undefined,
+		groupBy: isGrouped ? { field: 'type', direction: 'asc' } : undefined,
 		infiniteScrollEnabled,
 	} );
 	const { data: shownData, paginationInfo: normalPaginationInfo } =
@@ -173,8 +174,9 @@ const DataViewsPickerContent = ( {
 				itemListLabel="Galactic Bodies"
 				defaultLayouts={ {
 					[ LAYOUT_PICKER_GRID ]: {},
+					[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
 				} }
-				paddingX={ paddingX }
+				padding={ customPadding }
 			/>
 		</>
 	);
@@ -284,7 +286,7 @@ export const WithModal = ( {
 						selection={ selectedItems.map( ( item ) =>
 							String( item.id )
 						) }
-						paddingX={ 32 }
+						padding="large"
 					/>
 				</Modal>
 			) }
@@ -337,7 +339,7 @@ function useInfiniteScroll( {
 			...view,
 			page: currentPage + 1,
 		} );
-	}, [ isLoadingMore, currentPage, totalPages, view ] );
+	}, [ isLoadingMore, currentPage, totalPages, view, setView ] );
 
 	// Initialize data on first load or when view changes significantly
 	useEffect( () => {
@@ -361,6 +363,8 @@ function useInfiniteScroll( {
 		view.perPage,
 		currentPage,
 		view.infiniteScrollEnabled,
+		shownData,
+		getItemId,
 	] );
 
 	const paginationInfo = {

From e4688838806ff99ff1ef58675233d3cb0acb53f1 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 11:58:55 +1100
Subject: [PATCH 06/16] Update stories to include configurable padding

---
 .../src/stories/dataviews-picker.story.tsx    | 26 ++++++++++++++-----
 .../dataviews/src/stories/dataviews.story.tsx | 19 ++++++++++++++
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index a4b126391f5c6e..722e2d3d3f82d1 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -54,6 +54,18 @@ const storyArgTypes = {
 		description:
 			'Whether the infinite scroll is enabled. Enabling this disables the "Is grouped" option',
 	},
+	padding: {
+		control: 'select',
+		options: [
+			'x-small',
+			'small',
+			'medium',
+			'large',
+			'extra-large',
+			'none',
+		],
+		description: 'Determines the amount of padding within the component',
+	},
 };
 
 interface PickerContentProps {
@@ -187,17 +199,20 @@ export const Default = ( {
 	isMultiselectable,
 	isGrouped,
 	infiniteScrollEnabled,
+	padding,
 }: {
 	perPageSizes: number[];
 	isMultiselectable: boolean;
 	isGrouped: boolean;
 	infiniteScrollEnabled: boolean;
+	padding?: PaddingOptions;
 } ) => (
 	<DataViewsPickerContent
 		perPageSizes={ perPageSizes }
 		isMultiselectable={ isMultiselectable }
 		isGrouped={ isGrouped }
 		infiniteScrollEnabled={ infiniteScrollEnabled }
+		padding={ padding }
 	/>
 );
 
@@ -209,11 +224,13 @@ export const WithModal = ( {
 	isMultiselectable,
 	isGrouped,
 	infiniteScrollEnabled,
+	padding,
 }: {
 	perPageSizes: number[];
 	isMultiselectable: boolean;
 	isGrouped: boolean;
 	infiniteScrollEnabled: boolean;
+	padding?: PaddingOptions;
 } ) => {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ selectedItems, setSelectedItems ] = useState< SpaceObject[] >( [] );
@@ -241,11 +258,6 @@ export const WithModal = ( {
 
 	return (
 		<>
-			<style>{ `
-				.dataviews-picker-modal .components-modal__content {
-					padding: 0;
-				}
-			` }</style>
 			<HStack justify="left">
 				<Button
 					variant="primary"
@@ -286,7 +298,7 @@ export const WithModal = ( {
 						selection={ selectedItems.map( ( item ) =>
 							String( item.id )
 						) }
-						padding="large"
+						padding={ padding }
 					/>
 				</Modal>
 			) }
@@ -294,7 +306,7 @@ export const WithModal = ( {
 	);
 };
 
-WithModal.args = storyArgs;
+WithModal.args = { ...storyArgs, padding: 'large' };
 WithModal.argTypes = storyArgTypes;
 
 function useInfiniteScroll( {
diff --git a/packages/dataviews/src/stories/dataviews.story.tsx b/packages/dataviews/src/stories/dataviews.story.tsx
index 654fdbbd657050..3d7d255db87130 100644
--- a/packages/dataviews/src/stories/dataviews.story.tsx
+++ b/packages/dataviews/src/stories/dataviews.story.tsx
@@ -38,6 +38,7 @@ import {
 } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { Field, View } from '../types';
+import type { PaddingOptions } from '../components/dataviews-picker/types';
 import {
 	DEFAULT_VIEW,
 	actions,
@@ -82,6 +83,11 @@ const defaultLayouts = {
 export const Default = ( {
 	perPageSizes = [ 10, 25, 50, 100 ],
 	hasClickableItems = true,
+	padding,
+}: {
+	perPageSizes: number[];
+	hasClickableItems: boolean;
+	padding?: PaddingOptions;
 } ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
@@ -115,6 +121,7 @@ export const Default = ( {
 			isItemClickable={ () => hasClickableItems }
 			defaultLayouts={ defaultLayouts }
 			config={ { perPageSizes } }
+			padding={ padding }
 		/>
 	);
 };
@@ -133,6 +140,18 @@ Default.argTypes = {
 		control: 'boolean',
 		description: 'Are the items clickable',
 	},
+	padding: {
+		control: 'select',
+		options: [
+			'x-small',
+			'small',
+			'medium',
+			'large',
+			'extra-large',
+			'none',
+		],
+		description: 'Determines the amount of padding within the component',
+	},
 };
 
 export const Empty = () => {

From 42ee369c6ea04132d1e7f6cd3802510c0c5d4866 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 12:18:48 +1100
Subject: [PATCH 07/16] Try to ensure that outer padding is accounted for

---
 .../src/components/dataviews-footer/style.scss        |  6 ++++--
 .../dataviews/src/components/dataviews/style.scss     |  7 +++++--
 .../dataviews/src/stories/dataviews-picker.story.tsx  | 10 ++++++++++
 packages/dataviews/src/stories/dataviews.story.tsx    | 11 +++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index c6461ed2b56d53..5d89168680a21c 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -7,7 +7,8 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding-block: $grid-unit-15;
+	padding-block-start: $grid-unit-15;
+	padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
 	padding-inline-start: var(--dataviews-padding-inline-start);
 	padding-inline-end: var(--dataviews-padding-inline-end);
 	border-top: $border-width solid $gray-100;
@@ -22,7 +23,8 @@
 
 @container (max-width: 430px) {
 	.dataviews-footer {
-		padding-block: $grid-unit-15;
+		padding-block-start: $grid-unit-15;
+		padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
 		padding-inline-start: var(--dataviews-padding-inline-start);
 		padding-inline-end: var(--dataviews-padding-inline-end);
 	}
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 998bd979e504af..73aeb0135a7355 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -27,7 +27,8 @@
 .dataviews__view-actions,
 .dataviews-filters__container {
 	box-sizing: border-box;
-	padding-block: $grid-unit-20;
+	padding-block-start: var(--dataviews-padding-block-start, #{$grid-unit-20});
+	padding-block-end: $grid-unit-20;
 	padding-inline-start: var(--dataviews-padding-inline-start);
 	padding-inline-end: var(--dataviews-padding-inline-end);
 	flex-shrink: 0;
@@ -62,13 +63,15 @@
 @container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {
-		padding-block: $grid-unit-15;
+		padding-block-start: var(--dataviews-padding-block-start, #{$grid-unit-15});
+		padding-block-end: $grid-unit-15;
 		padding-inline-start: var(--dataviews-padding-inline-start);
 		padding-inline-end: var(--dataviews-padding-inline-end);
 	}
 
 	.dataviews-no-results,
 	.dataviews-loading {
+		padding-block: 0;
 		padding-inline-start: var(--dataviews-padding-inline-start);
 		padding-inline-end: var(--dataviews-padding-inline-end);
 	}
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 722e2d3d3f82d1..29f345c234991d 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -57,6 +57,7 @@ const storyArgTypes = {
 	padding: {
 		control: 'select',
 		options: [
+			'default',
 			'x-small',
 			'small',
 			'medium',
@@ -64,6 +65,15 @@ const storyArgTypes = {
 			'extra-large',
 			'none',
 		],
+		mapping: {
+			default: undefined,
+			'x-small': 'x-small',
+			small: 'small',
+			medium: 'medium',
+			large: 'large',
+			'extra-large': 'extra-large',
+			none: 'none',
+		},
 		description: 'Determines the amount of padding within the component',
 	},
 };
diff --git a/packages/dataviews/src/stories/dataviews.story.tsx b/packages/dataviews/src/stories/dataviews.story.tsx
index 3d7d255db87130..1449685f5fd4e0 100644
--- a/packages/dataviews/src/stories/dataviews.story.tsx
+++ b/packages/dataviews/src/stories/dataviews.story.tsx
@@ -129,6 +129,7 @@ export const Default = ( {
 Default.args = {
 	perPageSizes: [ 10, 25, 50, 100 ],
 	hasClickableItems: true,
+	padding: undefined,
 };
 
 Default.argTypes = {
@@ -143,6 +144,7 @@ Default.argTypes = {
 	padding: {
 		control: 'select',
 		options: [
+			'default',
 			'x-small',
 			'small',
 			'medium',
@@ -150,6 +152,15 @@ Default.argTypes = {
 			'extra-large',
 			'none',
 		],
+		mapping: {
+			default: undefined,
+			'x-small': 'x-small',
+			small: 'small',
+			medium: 'medium',
+			large: 'large',
+			'extra-large': 'extra-large',
+			none: 'none',
+		},
 		description: 'Determines the amount of padding within the component',
 	},
 };

From 004dfa26c7f98e9582d6b550630a68e31d388b9a Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 13:33:47 +1100
Subject: [PATCH 08/16] Tweak naming

---
 .../dataviews/src/components/dataviews-footer/style.scss    | 2 +-
 .../src/components/dataviews-picker/get-padding-by-size.ts  | 6 +++---
 packages/dataviews/src/components/dataviews-picker/types.ts | 4 ++--
 packages/dataviews/src/stories/dataviews-picker.story.tsx   | 4 ++--
 packages/dataviews/src/stories/dataviews.story.tsx          | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 5d89168680a21c..f3623955d11f8d 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -6,7 +6,7 @@
 	position: sticky;
 	bottom: 0;
 	left: 0;
-	background-color: $white;
+	background-color: inherit;
 	padding-block-start: $grid-unit-15;
 	padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
 	padding-inline-start: var(--dataviews-padding-inline-start);
diff --git a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
index 64454d887f7260..45f6386e257f87 100644
--- a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
+++ b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
@@ -5,19 +5,19 @@ import type { PaddingSize, PaddingOptions, DimensionVariant } from './types';
 
 /**
  * Maps padding size tokens to CSS values.
- * Aligned with the Card component's spacing scale (space function with 4px base):
+ * Aligned with the Box component's spacing scale (space function with 4px base):
  * - x-small: space(2) = 8px
  * - small: space(4) = 16px
  * - medium: space(6) = 24px
  * - large: space(8) = 32px
- * - extra-large: space(12) = 48px
+ * - x-large: space(12) = 48px
  */
 const paddingValuesBySize: Record< PaddingSize, string > = {
 	'x-small': '8px',
 	small: '16px',
 	medium: '24px',
 	large: '32px',
-	'extra-large': '48px',
+	'x-large': '48px',
 	none: '0',
 };
 
diff --git a/packages/dataviews/src/components/dataviews-picker/types.ts b/packages/dataviews/src/components/dataviews-picker/types.ts
index 25df8d3b434d3d..3a22a9079d1205 100644
--- a/packages/dataviews/src/components/dataviews-picker/types.ts
+++ b/packages/dataviews/src/components/dataviews-picker/types.ts
@@ -1,13 +1,13 @@
 /**
  * Size token for padding.
- * Aligned with the Card component's spacing scale (4px base grid).
+ * Aligned with the Box component's spacing scale (4px base grid).
  */
 export type PaddingSize =
 	| 'x-small'
 	| 'small'
 	| 'medium'
 	| 'large'
-	| 'extra-large'
+	| 'x-large'
 	| 'none';
 
 /**
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 29f345c234991d..e66aac9b6cca60 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -62,7 +62,7 @@ const storyArgTypes = {
 			'small',
 			'medium',
 			'large',
-			'extra-large',
+			'x-large',
 			'none',
 		],
 		mapping: {
@@ -71,7 +71,7 @@ const storyArgTypes = {
 			small: 'small',
 			medium: 'medium',
 			large: 'large',
-			'extra-large': 'extra-large',
+			'x-large': 'x-large',
 			none: 'none',
 		},
 		description: 'Determines the amount of padding within the component',
diff --git a/packages/dataviews/src/stories/dataviews.story.tsx b/packages/dataviews/src/stories/dataviews.story.tsx
index 1449685f5fd4e0..c81e66f9a0cd3c 100644
--- a/packages/dataviews/src/stories/dataviews.story.tsx
+++ b/packages/dataviews/src/stories/dataviews.story.tsx
@@ -149,7 +149,7 @@ Default.argTypes = {
 			'small',
 			'medium',
 			'large',
-			'extra-large',
+			'x-large',
 			'none',
 		],
 		mapping: {
@@ -158,7 +158,7 @@ Default.argTypes = {
 			small: 'small',
 			medium: 'medium',
 			large: 'large',
-			'extra-large': 'extra-large',
+			'x-large': 'x-large',
 			none: 'none',
 		},
 		description: 'Determines the amount of padding within the component',

From 1addbfa3d778199c110f50693972dfc652749f74 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 13:56:38 +1100
Subject: [PATCH 09/16] Update where types live

---
 .../dataviews-picker/get-padding-by-size.ts   |  6 +++-
 .../src/components/dataviews-picker/types.ts  | 30 ------------------
 .../src/components/dataviews/index.tsx        |  3 +-
 .../src/stories/dataviews-picker.story.tsx    |  2 +-
 .../dataviews/src/stories/dataviews.story.tsx |  2 +-
 packages/dataviews/src/types/private.ts       | 31 +++++++++++++++++++
 6 files changed, 39 insertions(+), 35 deletions(-)
 delete mode 100644 packages/dataviews/src/components/dataviews-picker/types.ts

diff --git a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
index 45f6386e257f87..33f65d92c9a8cd 100644
--- a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
+++ b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import type { PaddingSize, PaddingOptions, DimensionVariant } from './types';
+import type {
+	PaddingSize,
+	PaddingOptions,
+	DimensionVariant,
+} from '../../types/private';
 
 /**
  * Maps padding size tokens to CSS values.
diff --git a/packages/dataviews/src/components/dataviews-picker/types.ts b/packages/dataviews/src/components/dataviews-picker/types.ts
deleted file mode 100644
index 3a22a9079d1205..00000000000000
--- a/packages/dataviews/src/components/dataviews-picker/types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Size token for padding.
- * Aligned with the Box component's spacing scale (4px base grid).
- */
-export type PaddingSize =
-	| 'x-small'
-	| 'small'
-	| 'medium'
-	| 'large'
-	| 'x-large'
-	| 'none';
-
-/**
- * Dimension variant that allows directional specification using logical CSS properties.
- * Supports both block (vertical) and inline (horizontal) directions, with optional start/end variants.
- */
-export type DimensionVariant< T > = {
-	block?: T;
-	blockStart?: T;
-	blockEnd?: T;
-	inline?: T;
-	inlineStart?: T;
-	inlineEnd?: T;
-};
-
-/**
- * Padding options for DataViewsPicker.
- * Can be either a single padding size token or an object with directional variants.
- */
-export type PaddingOptions = PaddingSize | DimensionVariant< PaddingSize >;
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 06350b49525a0f..2c39c340d52540 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -32,8 +32,7 @@ import DataViewsViewConfig, {
 } from '../dataviews-view-config';
 import normalizeFields from '../../field-types/utils/normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
-import type { SelectionOrUpdater } from '../../types/private';
-import type { PaddingOptions } from '../dataviews-picker/types';
+import type { SelectionOrUpdater, PaddingOptions } from '../../types/private';
 import { getPaddingBySizeStyles } from '../dataviews-picker/get-padding-by-size';
 type ItemWithId = { id: string };
 
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index e66aac9b6cca60..4c4227d3031a4c 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -20,7 +20,7 @@ import DataViewsPicker from '../components/dataviews-picker/index';
 import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { ActionButton, View } from '../types';
-import type { PaddingOptions } from '../components/dataviews-picker/types';
+import type { PaddingOptions } from '../types/private';
 import { data, fields, type SpaceObject } from './dataviews.fixtures';
 
 const meta = {
diff --git a/packages/dataviews/src/stories/dataviews.story.tsx b/packages/dataviews/src/stories/dataviews.story.tsx
index c81e66f9a0cd3c..d7f79d12c2dd3e 100644
--- a/packages/dataviews/src/stories/dataviews.story.tsx
+++ b/packages/dataviews/src/stories/dataviews.story.tsx
@@ -38,7 +38,7 @@ import {
 } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { Field, View } from '../types';
-import type { PaddingOptions } from '../components/dataviews-picker/types';
+import type { PaddingOptions } from '../types/private';
 import {
 	DEFAULT_VIEW,
 	actions,
diff --git a/packages/dataviews/src/types/private.ts b/packages/dataviews/src/types/private.ts
index d2d453e63599c9..45de2dc0b363a1 100644
--- a/packages/dataviews/src/types/private.ts
+++ b/packages/dataviews/src/types/private.ts
@@ -1,2 +1,33 @@
 export type SelectionOrUpdater = string[] | ( ( prev: string[] ) => string[] );
 export type SetSelection = ( selection: SelectionOrUpdater ) => void;
+
+/**
+ * Size token for padding.
+ * Aligned with the Box component's spacing scale (4px base grid).
+ */
+export type PaddingSize =
+	| 'x-small'
+	| 'small'
+	| 'medium'
+	| 'large'
+	| 'x-large'
+	| 'none';
+
+/**
+ * Dimension variant that allows directional specification using logical CSS properties.
+ * Supports both block (vertical) and inline (horizontal) directions, with optional start/end variants.
+ */
+export type DimensionVariant< T > = {
+	block?: T;
+	blockStart?: T;
+	blockEnd?: T;
+	inline?: T;
+	inlineStart?: T;
+	inlineEnd?: T;
+};
+
+/**
+ * Padding options for DataViews and DataViewsPicker.
+ * Can be either a single padding size token or an object with directional variants.
+ */
+export type PaddingOptions = PaddingSize | DimensionVariant< PaddingSize >;

From eb0c7660fb0b5fd519fec2a48f4f8e2d54ed2f2e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:01:01 +1100
Subject: [PATCH 10/16] Add changelog entry

---
 packages/dataviews/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 957b6d0b5e0f1e..f44b9f77e6b52b 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 - Simplify field normalization and types. [#73387](https://github.com/WordPress/gutenberg/pull/73387)
+- DataViews and DataViewsPicker: add padding prop to control outer padding. [#72989](https://github.com/WordPress/gutenberg/pull/72989)
 - DataViews table layout: make checkboxes permanently visible when bulk actions are available. [#73245](https://github.com/WordPress/gutenberg/pull/73245)
 - DataViews: Make sticky elements (table headers, footer, actions column) inherit background colors from parent container. This allows DataViews instances to seamlessly adapt to containers with custom background colors. [#73240](https://github.com/WordPress/gutenberg/pull/73240)
 - DataViews table layout: only apply hover styles when bulk actions are available. [#73248](https://github.com/WordPress/gutenberg/pull/73248)

From 1a5bcd2499215ac057e13cde313590f08d03fd79 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:15:35 +1100
Subject: [PATCH 11/16] Remove unintended changes to the picker story

---
 .../dataviews/src/stories/dataviews-picker.story.tsx     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 4c4227d3031a4c..2eba1ee5ccd5fa 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -163,6 +163,7 @@ const DataViewsPickerContent = ( {
 		setView,
 		data: shownData,
 		getItemId: ( item ) => item.id.toString(),
+		totalDataLength: shownData.length,
 	} );
 
 	return (
@@ -324,11 +325,13 @@ function useInfiniteScroll( {
 	setView,
 	data: shownData,
 	getItemId,
+	totalDataLength,
 }: {
 	view: View;
 	setView: ( view: View ) => void;
 	data: SpaceObject[];
 	getItemId: ( item: SpaceObject ) => string;
+	totalDataLength: number;
 } ): {
 	data: SpaceObject[];
 	paginationInfo: {
@@ -345,8 +348,8 @@ function useInfiniteScroll( {
 	);
 	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
 
-	const totalItems = data.length;
-	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
+	const totalItems = totalDataLength;
+	const totalPages = Math.ceil( totalItems / ( view.perPage || 10 ) );
 	const currentPage = view.page || 1;
 	const hasMoreData = currentPage < totalPages;
 
@@ -385,8 +388,6 @@ function useInfiniteScroll( {
 		view.perPage,
 		currentPage,
 		view.infiniteScrollEnabled,
-		shownData,
-		getItemId,
 	] );
 
 	const paginationInfo = {

From 397e08ac8a02a0102c74bea9f096e869e98ae545 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:16:57 +1100
Subject: [PATCH 12/16] Remove unnecessary class

---
 packages/dataviews/src/stories/dataviews-picker.story.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 2eba1ee5ccd5fa..ef86481285bc89 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -298,7 +298,6 @@ export const WithModal = ( {
 					onRequestClose={ () => setIsModalOpen( false ) }
 					isFullScreen={ false }
 					size="fill"
-					className="dataviews-picker-modal"
 				>
 					<DataViewsPickerContent
 						perPageSizes={ perPageSizes }

From 61dfe54a7ee0f9d51019740518fda9fa463afdd0 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:26:03 +1100
Subject: [PATCH 13/16] Fix imports of types

---
 packages/dataviews/src/components/dataviews-picker/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-picker/index.tsx b/packages/dataviews/src/components/dataviews-picker/index.tsx
index 3d952618b889e9..88db5747d2c75d 100644
--- a/packages/dataviews/src/components/dataviews-picker/index.tsx
+++ b/packages/dataviews/src/components/dataviews-picker/index.tsx
@@ -31,8 +31,7 @@ import DataViewsViewConfig, {
 } from '../dataviews-view-config';
 import normalizeFields from '../../field-types/utils/normalize-fields';
 import type { ActionButton, Field, View, SupportedLayouts } from '../../types';
-import type { SelectionOrUpdater } from '../../types/private';
-import type { PaddingOptions } from './types';
+import type { SelectionOrUpdater, PaddingOptions } from '../../types/private';
 import { getPaddingBySizeStyles } from './get-padding-by-size';
 type ItemWithId = { id: string };
 

From 338f04d2e4ced7a595a772d2cc05d1433aa3a667 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 15:08:32 +1100
Subject: [PATCH 14/16] Try the WithModal story with a default padding of
 'none'

---
 .../dataviews/src/stories/dataviews-picker.story.tsx  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index ef86481285bc89..389acfdad5e379 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -269,6 +269,15 @@ export const WithModal = ( {
 
 	return (
 		<>
+			{ isModalOpen && (
+				// TODO: Remove this temporary style when https://github.com/WordPress/gutenberg/pull/73390 lands.
+				// This works around a bug where the sticky footer is transparent if no background color is set.
+				<style>{ `
+					.components-modal__children-container {
+						background-color: white;
+					}
+				` }</style>
+			) }
 			<HStack justify="left">
 				<Button
 					variant="primary"
@@ -316,7 +325,7 @@ export const WithModal = ( {
 	);
 };
 
-WithModal.args = { ...storyArgs, padding: 'large' };
+WithModal.args = { ...storyArgs, padding: 'none' };
 WithModal.argTypes = storyArgTypes;
 
 function useInfiniteScroll( {

From 9f6ec177b219390aa14534b51d5dcc27f711662d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 15:22:10 +1100
Subject: [PATCH 15/16] Ensure existing container queries still work when no
 padding value is set

---
 .../components/dataviews-footer/style.scss    |  8 +++----
 .../src/components/dataviews/style.scss       | 23 +++++++------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index f3623955d11f8d..9b0103ae8f0db1 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -9,8 +9,8 @@
 	background-color: inherit;
 	padding-block-start: $grid-unit-15;
 	padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
-	padding-inline-start: var(--dataviews-padding-inline-start);
-	padding-inline-end: var(--dataviews-padding-inline-end);
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -25,8 +25,8 @@
 	.dataviews-footer {
 		padding-block-start: $grid-unit-15;
 		padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
-		padding-inline-start: var(--dataviews-padding-inline-start);
-		padding-inline-end: var(--dataviews-padding-inline-end);
+		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
 
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 73aeb0135a7355..5f1396e2a05f85 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -15,13 +15,6 @@
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 	background-color: inherit;
-	--dataviews-padding-inline-start: #{$grid-unit-60};
-	--dataviews-padding-inline-end: #{$grid-unit-60};
-
-	@container (max-width: 430px) {
-		--dataviews-padding-inline-start: #{$grid-unit-30};
-		--dataviews-padding-inline-end: #{$grid-unit-30};
-	}
 }
 
 .dataviews__view-actions,
@@ -29,8 +22,8 @@
 	box-sizing: border-box;
 	padding-block-start: var(--dataviews-padding-block-start, #{$grid-unit-20});
 	padding-block-end: $grid-unit-20;
-	padding-inline-start: var(--dataviews-padding-inline-start);
-	padding-inline-end: var(--dataviews-padding-inline-end);
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -44,8 +37,8 @@
 .dataviews-no-results,
 .dataviews-loading {
 	padding-block: 0;
-	padding-inline-start: var(--dataviews-padding-inline-start);
-	padding-inline-end: var(--dataviews-padding-inline-end);
+	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -65,15 +58,15 @@
 	.dataviews-filters__container {
 		padding-block-start: var(--dataviews-padding-block-start, #{$grid-unit-15});
 		padding-block-end: $grid-unit-15;
-		padding-inline-start: var(--dataviews-padding-inline-start);
-		padding-inline-end: var(--dataviews-padding-inline-end);
+		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 
 	.dataviews-no-results,
 	.dataviews-loading {
 		padding-block: 0;
-		padding-inline-start: var(--dataviews-padding-inline-start);
-		padding-inline-end: var(--dataviews-padding-inline-end);
+		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
 

From 860c35e398715eb496601945cbe87f0cd5b80f45 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Nov 2025 15:36:27 +1100
Subject: [PATCH 16/16] Update naming of the CSS variables

---
 .../components/dataviews-footer/style.scss    | 12 ++++-----
 .../dataviews-picker/get-padding-by-size.ts   | 26 +++++++++----------
 .../src/components/dataviews/style.scss       | 20 +++++++-------
 .../src/dataviews-layouts/grid/style.scss     |  8 +++---
 .../src/dataviews-layouts/list/style.scss     |  8 +++---
 .../dataviews-layouts/picker-grid/style.scss  |  4 +--
 .../src/dataviews-layouts/table/style.scss    |  8 +++---
 .../dataviews-layouts/utils/grid-items.scss   |  8 +++---
 8 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 9b0103ae8f0db1..c64e83de2f4a82 100644
--- a/packages/dataviews/src/components/dataviews-footer/style.scss
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -8,9 +8,9 @@
 	left: 0;
 	background-color: inherit;
 	padding-block-start: $grid-unit-15;
-	padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-block-end: var(--wp-dataviews-padding-block-end, #{$grid-unit-15});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -24,9 +24,9 @@
 @container (max-width: 430px) {
 	.dataviews-footer {
 		padding-block-start: $grid-unit-15;
-		padding-block-end: var(--dataviews-padding-block-end, #{$grid-unit-15});
-		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+		padding-block-end: var(--wp-dataviews-padding-block-end, #{$grid-unit-15});
+		padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
 
diff --git a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
index 33f65d92c9a8cd..79949f1a57c45c 100644
--- a/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
+++ b/packages/dataviews/src/components/dataviews-picker/get-padding-by-size.ts
@@ -9,7 +9,7 @@ import type {
 
 /**
  * Maps padding size tokens to CSS values.
- * Aligned with the Box component's spacing scale (space function with 4px base):
+ * Aligned with the Card component's spacing scale (space function with 4px base):
  * - x-small: space(2) = 8px
  * - small: space(4) = 16px
  * - medium: space(6) = 24px
@@ -52,10 +52,10 @@ export function getPaddingBySizeStyles(
 	// Handle string-based sizes (single value applied to all directional variants)
 	if ( typeof padding === 'string' ) {
 		const value = getSinglePaddingValue( padding );
-		styles[ '--dataviews-padding-block-start' ] = value;
-		styles[ '--dataviews-padding-block-end' ] = value;
-		styles[ '--dataviews-padding-inline-start' ] = value;
-		styles[ '--dataviews-padding-inline-end' ] = value;
+		styles[ '--wp-dataviews-padding-block-start' ] = value;
+		styles[ '--wp-dataviews-padding-block-end' ] = value;
+		styles[ '--wp-dataviews-padding-inline-start' ] = value;
+		styles[ '--wp-dataviews-padding-inline-end' ] = value;
 		return styles;
 	}
 
@@ -71,40 +71,40 @@ export function getPaddingBySizeStyles(
 	if ( block !== undefined ) {
 		const value = getSinglePaddingValue( block );
 		if ( blockStart === undefined ) {
-			styles[ '--dataviews-padding-block-start' ] = value;
+			styles[ '--wp-dataviews-padding-block-start' ] = value;
 		}
 		if ( blockEnd === undefined ) {
-			styles[ '--dataviews-padding-block-end' ] = value;
+			styles[ '--wp-dataviews-padding-block-end' ] = value;
 		}
 	}
 
 	if ( blockStart !== undefined ) {
-		styles[ '--dataviews-padding-block-start' ] =
+		styles[ '--wp-dataviews-padding-block-start' ] =
 			getSinglePaddingValue( blockStart );
 	}
 
 	if ( blockEnd !== undefined ) {
-		styles[ '--dataviews-padding-block-end' ] =
+		styles[ '--wp-dataviews-padding-block-end' ] =
 			getSinglePaddingValue( blockEnd );
 	}
 
 	if ( inline !== undefined ) {
 		const value = getSinglePaddingValue( inline );
 		if ( inlineStart === undefined ) {
-			styles[ '--dataviews-padding-inline-start' ] = value;
+			styles[ '--wp-dataviews-padding-inline-start' ] = value;
 		}
 		if ( inlineEnd === undefined ) {
-			styles[ '--dataviews-padding-inline-end' ] = value;
+			styles[ '--wp-dataviews-padding-inline-end' ] = value;
 		}
 	}
 
 	if ( inlineStart !== undefined ) {
-		styles[ '--dataviews-padding-inline-start' ] =
+		styles[ '--wp-dataviews-padding-inline-start' ] =
 			getSinglePaddingValue( inlineStart );
 	}
 
 	if ( inlineEnd !== undefined ) {
-		styles[ '--dataviews-padding-inline-end' ] =
+		styles[ '--wp-dataviews-padding-inline-end' ] =
 			getSinglePaddingValue( inlineEnd );
 	}
 
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 5f1396e2a05f85..cf40f11a8a2e60 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -20,10 +20,10 @@
 .dataviews__view-actions,
 .dataviews-filters__container {
 	box-sizing: border-box;
-	padding-block-start: var(--dataviews-padding-block-start, #{$grid-unit-20});
+	padding-block-start: var(--wp-dataviews-padding-block-start, #{$grid-unit-20});
 	padding-block-end: $grid-unit-20;
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -37,8 +37,8 @@
 .dataviews-no-results,
 .dataviews-loading {
 	padding-block: 0;
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -56,17 +56,17 @@
 @container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {
-		padding-block-start: var(--dataviews-padding-block-start, #{$grid-unit-15});
+		padding-block-start: var(--wp-dataviews-padding-block-start, #{$grid-unit-15});
 		padding-block-end: $grid-unit-15;
-		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+		padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 
 	.dataviews-no-results,
 	.dataviews-loading {
 		padding-block: 0;
-		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+		padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
 
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 6f7988fc3d7e04..dea25f1541bbec 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -184,12 +184,12 @@
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
 	padding-block: 0;
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 	container-type: inline-size;
 
 	@container (max-width: 430px) {
-		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+		padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
index 86ae7a76265bb0..375c7a4a405980 100644
--- a/packages/dataviews/src/dataviews-layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -16,8 +16,8 @@ div.dataviews-view-list {
 		.dataviews-view-list__item-wrapper {
 			position: relative;
 			padding-block: $grid-unit-20;
-			padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-			padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+			padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+			padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 			box-sizing: border-box;
 		}
 
@@ -209,6 +209,6 @@ div.dataviews-view-list {
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
 	padding-block: 0;
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 }
diff --git a/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss b/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
index a40ef98659f48a..cb123e4ed0d75f 100644
--- a/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/picker-grid/style.scss
@@ -172,6 +172,6 @@
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
 	padding-block: 0;
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 0e0aed3c6aee07..51c661b16d4693 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -65,7 +65,7 @@
 
 		td:first-child,
 		th:first-child {
-			padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
+			padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
 
 			.dataviews-view-table-header-button {
 				margin-inline-start: - #{$grid-unit-10};
@@ -74,7 +74,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+			padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 		}
 
 		&:last-child {
@@ -253,12 +253,12 @@
 @container (max-width: 430px) {
 	.dataviews-view-table tr td:first-child,
 	.dataviews-view-table tr th:first-child {
-		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
 	}
 
 	.dataviews-view-table tr td:last-child,
 	.dataviews-view-table tr th:last-child {
-		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+		padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 }
 
diff --git a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
index 6a0a1952d225ad..0e17080ccc49a1 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
+++ b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
@@ -7,8 +7,8 @@
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
 	padding-block-start: 0;
-	padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-60});
-	padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-60});
+	padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-60});
+	padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-60});
 	padding-block-end: $grid-unit-30;
 	container-type: inline-size;
 	/**
@@ -16,8 +16,8 @@
 		* the sidebar width. This was done to match the existing styles we had.
 		*/
 	@container (max-width: 430px) {
-		padding-inline-start: var(--dataviews-padding-inline-start, #{$grid-unit-30});
-		padding-inline-end: var(--dataviews-padding-inline-end, #{$grid-unit-30});
+		padding-inline-start: var(--wp-dataviews-padding-inline-start, #{$grid-unit-30});
+		padding-inline-end: var(--wp-dataviews-padding-inline-end, #{$grid-unit-30});
 	}
 
 	@media not (prefers-reduced-motion) {