DataViews: Fix grid padding values on mobile viewports #71455
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +19 B (0%) Total Size: 1.92 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 64ecb40. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17397015072
|
oandregal
approved these changes
Sep 2, 2025
Member
oandregal
left a comment
oandregal
left a comment
There was a problem hiding this comment.
Before:
Screen.Recording.2025-09-02.at.13.59.31.mov
After:
Screen.Recording.2025-09-02.at.13.58.39.mov
| * max-width. | ||
| */ | ||
| @container (max-width: 480px) { | ||
| @container (max-width: 430px) { |
Contributor
There was a problem hiding this comment.
Oh interesting, I wonder why the discrepancy was introduced? I believe the 480px value was reached from some calculation based on the gutenberg media queries with the site editor sidebar width. I can't find any explanation for where the 430 value comes from but I see it's also used in edit-site.
Contributor
Author
There was a problem hiding this comment.
I couldn't find a reason. The container query originally had some grid related css in it, so maybe the styles were more focused on the gird.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
I noticed that the Grid layout in DataViews has some padding issues on mobile-ish viewports.
The Group By header has incorrect padding, since it's missing a container query.
I also noticed the container query that adjusts padding around the grid layout doesn't match the same values that the rest of DataViews uses.
The grid breaks at 480px, while DataViews components break at 430px. This can lead to a situation where the elements look misaligned. See:
gutenberg/packages/dataviews/src/components/dataviews/style.scss
Line 44 in 6938b0b
How?
Use 430px for the grid container queries.
Add a new container query for the group by header.
Testing Instructions
npm run storybook:devtrunkand you'll spot the inconsistencies.Screenshots or screencast
Before
After