From 1e459bc47f32d6c6fcf14c34d542c9ad24fafb92 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 2 Sep 2025 15:38:46 +0800 Subject: [PATCH 1/3] Match grid responsive container query to dataviews container query --- packages/dataviews/src/dataviews-layouts/grid/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 0488860c74c2e9..01d4fe3d4baa2d 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -7,10 +7,10 @@ padding: 0 $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. + * Match the padding applied to other DataViews components at the same + * max-width. */ - @container (max-width: 480px) { + @container (max-width: 430px) { padding-left: $grid-unit-30; padding-right: $grid-unit-30; } From d66e35734355b6430f867f639c6d54b8a9e42ed5 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 2 Sep 2025 15:39:34 +0800 Subject: [PATCH 2/3] Ensure group header padding matches rest of dataviews on mobile viewports --- packages/dataviews/src/dataviews-layouts/grid/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 01d4fe3d4baa2d..5e26debd734c7a 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -162,4 +162,10 @@ color: $gray-900; margin: 0 0 $grid-unit-10 0; padding: 0 $grid-unit-60; + container-type: inline-size; + + @container (max-width: 430px) { + padding-left: $grid-unit-30; + padding-right: $grid-unit-30; + } } From 64ecb40208c856bd7380af585d7b8309ea11e859 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 2 Sep 2025 15:53:04 +0800 Subject: [PATCH 3/3] 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 5dac1b82db9fc2..c5cc24da61da17 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -9,6 +9,7 @@ ### Bug Fixes - DataViews: Fix incorrect documentation for `defaultLayouts` prop. [#71334](https://github.com/WordPress/gutenberg/pull/71334) +- DataViews: Fix mismatched padding on mobile viewports for grid layout [#71455](https://github.com/WordPress/gutenberg/pull/71455) ## 7.0.0 (2025-08-20)