From e38a77ffcafc12c1ddd2b70b913d5ed87bd4f34e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 10 Nov 2025 15:39:51 +1100
Subject: [PATCH] DataViews: Try removing outer padding from the component and
layouts
---
.../components/dataviews-footer/style.scss | 8 +---
.../src/components/dataviews/style.scss | 44 +------------------
.../src/dataviews-layouts/grid/style.scss | 7 +--
.../src/dataviews-layouts/table/style.scss | 20 +--------
.../dataviews-layouts/utils/grid-items.scss | 11 +----
.../src/stories/dataviews-picker.story.tsx | 22 +++++-----
.../dataviews/src/stories/dataviews.style.css | 2 +-
.../src/components/page-patterns/index.js | 1 +
.../src/components/page-templates/index.js | 1 +
.../src/components/post-list/index.js | 1 +
10 files changed, 20 insertions(+), 97 deletions(-)
diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
index 15420f6cce3546..4ec79888f4c90e 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-top: $grid-unit-15;
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;
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index cd428d1739ecf7..415ca3f0a24722 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -19,7 +19,7 @@
.dataviews__view-actions,
.dataviews-filters__container {
box-sizing: border-box;
- padding: $grid-unit-20 $grid-unit-60;
+ padding-bottom: $grid-unit-20;
flex-shrink: 0;
position: sticky;
left: 0;
@@ -31,7 +31,6 @@
.dataviews-no-results,
.dataviews-loading {
- padding: 0 $grid-unit-60;
flex-grow: 1;
display: flex;
align-items: center;
@@ -46,19 +45,6 @@
text-align: center;
}
-@container (max-width: 430px) {
- .dataviews__view-actions,
- .dataviews-filters__container {
- padding: $grid-unit-15 $grid-unit-30;
- }
-
- .dataviews-no-results,
- .dataviews-loading {
- padding-left: $grid-unit-30;
- padding-right: $grid-unit-30;
- }
-}
-
.dataviews-title-field {
font-size: $default-font-size;
font-weight: $font-weight-medium;
@@ -105,31 +91,3 @@
}
@include link-reset();
}
-
-/**
- * Applying a consistent 24px padding when DataViews are placed within cards.
- */
-.components-card__body:has(> .dataviews-wrapper),
-.components-card__body:has(> .dataviews-picker-wrapper) {
- padding: $grid-unit-10 0 0;
- overflow: hidden; // Prevent cells with white backgrounds overflowing the card
-
- .dataviews__view-actions,
- .dataviews-filters__container,
- .dataviews-footer,
- .dataviews-view-grid,
- .dataviews-loading,
- .dataviews-no-results {
- padding-inline: $grid-unit-30;
- }
-
- .dataviews-view-table tr td:first-child,
- .dataviews-view-table tr th:first-child {
- padding-inline-start: $grid-unit-30;
- }
-
- .dataviews-view-table tr td:last-child,
- .dataviews-view-table tr th:last-child {
- 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 69a461c23112d3..aa82aedda0f72d 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -183,11 +183,6 @@
font-weight: $font-weight-medium;
color: $gray-900;
margin: 0 0 $grid-unit-10 0;
- padding: 0 $grid-unit-60;
+ padding: 0;
container-type: inline-size;
-
- @container (max-width: 430px) {
- padding-left: $grid-unit-30;
- padding-right: $grid-unit-30;
- }
}
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 6895621d25fa8f..2f04f7a31078ed 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -63,18 +63,12 @@
td:first-child,
th:first-child {
- padding-left: $grid-unit-60;
-
+ // TODO: Should this be removed?
.dataviews-view-table-header-button {
margin-left: - #{$grid-unit-10};
}
}
- td:last-child,
- th:last-child {
- padding-right: $grid-unit-60;
- }
-
&:last-child {
border-bottom: 0;
}
@@ -253,18 +247,6 @@
}
}
-@container (max-width: 430px) {
- .dataviews-view-table tr td:first-child,
- .dataviews-view-table tr th:first-child {
- padding-left: $grid-unit-30;
- }
-
- .dataviews-view-table tr td:last-child,
- .dataviews-view-table tr th:last-child {
- padding-right: $grid-unit-30;
- }
-}
-
.dataviews-view-table-selection-checkbox {
--checkbox-input-size: 24px;
@include break-small() {
diff --git a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
index 72d87f63dba161..0276d9c754b704 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
+++ b/packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
@@ -6,16 +6,9 @@
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-top: 0;
+ padding-bottom: $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;
- }
@media not (prefers-reduced-motion) {
transition: padding ease-out 0.1s;
diff --git a/packages/dataviews/src/stories/dataviews-picker.story.tsx b/packages/dataviews/src/stories/dataviews-picker.story.tsx
index 99b8ff67192911..a115c3ac2f8c80 100644
--- a/packages/dataviews/src/stories/dataviews-picker.story.tsx
+++ b/packages/dataviews/src/stories/dataviews-picker.story.tsx
@@ -266,18 +266,16 @@ export const WithModal = ( {
isFullScreen={ false }
size="fill"
>
-
-
- String( item.id )
- ) }
- />
-
+
+ String( item.id )
+ ) }
+ />
) }
diff --git a/packages/dataviews/src/stories/dataviews.style.css b/packages/dataviews/src/stories/dataviews.style.css
index a8a8b0806c1c38..5b07048cb91414 100644
--- a/packages/dataviews/src/stories/dataviews.style.css
+++ b/packages/dataviews/src/stories/dataviews.style.css
@@ -10,7 +10,7 @@
.free-composition-heading,
.free-composition-header {
- padding: 16px 48px;
+ padding: 16px 12px;
}
.free-composition-heading {
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 41caab909d2747..6cfcf8be902559 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -204,6 +204,7 @@ export default function DataviewsPatterns() {
className="edit-site-page-patterns-dataviews"
title={ title }
subTitle={ description }
+ hasPadding
actions={
<>
{ isModified && (
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 3217528cb4ca54..d4c61a1d2526d2 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -318,6 +318,7 @@ export default function PageTemplates() {
{ isModified && (
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index d060e48465ce8e..23daff686c31e0 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -221,6 +221,7 @@ export default function PostList( { postType } ) {
return (
{ isModified && (