[WC-3547]: Data Grid 2 Stack top bar in narrow containers - #2389
Open
yordan-st wants to merge 2 commits into
Open
[WC-3547]: Data Grid 2 Stack top bar in narrow containers#2389yordan-st wants to merge 2 commits into
yordan-st wants to merge 2 commits into
Conversation
yordan-st
changed the title
yordan-st
force-pushed
the
fix/datagrid-narrow-top-bar-stacking
branch
from
August 18, 2026 09:36
ed6cf3f to
22cfe17
Compare
yordan-st
marked this pull request as ready for review
August 18, 2026 09:36
This comment has been minimized.
This comment has been minimized.
yordan-st
changed the title
yordan-st
force-pushed
the
fix/datagrid-narrow-top-bar-stacking
branch
from
August 20, 2026 08:48
22cfe17 to
7d4f572
Compare
This comment has been minimized.
This comment has been minimized.
The top bar container query targeted $root-padding-top instead of $root-paging-top, so the narrow-width rule has never applied and the top bar never stacked below 500px. Its footer counterpart is spelled correctly.
yordan-st
force-pushed
the
fix/datagrid-narrow-top-bar-stacking
branch
from
August 20, 2026 11:55
7d4f572 to
388fca9
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Pull request type
Bug fix (non-breaking change which fixes an issue)
Description
_datagrid.scss's top-bar container query targets#{$root}-padding-top, which no element ever carries — the class iswidget-datagrid-paging-top. The footer counterpart directly above it is spelled correctly, so this looks like a typo from when the two blocks were written.Effect: Data Grid 2's top bar has never stacked its content vertically in containers narrower than 500px, while the footer always has. One word changed.
Worth reviewing with care despite the size: because the rule has never applied, fixing it changes narrow-width layout for the first time. Below 500px the top bar now switches to
column-reverseand centres its zones, matching the footer's behaviour and the original intent.Found while investigating WC-3505; split out so Gallery and Data Grid 2 changes stay separately reviewable. Ticket created.
What should be covered while testing?
Above gridand multi selection withShow selection count= Top.column-reverse) with both zones full width and centred — the same way the footer already behaves.