[WC-3547]: Data Grid 2 Stack top bar in narrow containers

[yordan-st]

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 is widget-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-reverse and 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?

1. Place a Data Grid 2 with pagination Above grid and multi selection with Show selection count = Top.
2. Put it in a container narrower than 500px, or shrink the browser until the grid container crosses that width.
3. The top bar should stack vertically (pagination above the selection count, column-reverse) with both zones full width and centred — the same way the footer already behaves.
4. Above 500px, nothing should change from current behaviour.

[github-actions]

AI Code Review

✅ Approved — no issues found

---

What was reviewed

File	Change
packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss	One-character typo fix: #{$root}-padding-top → #{$root}-paging-top in the @container widget-datagrid-header narrow-width rule
packages/modules/data-widgets/CHANGELOG.md	[Unreleased] entry added under Data Grid 2 / Fixed

Skipped (out of scope): dist/, pnpm-lock.yaml

---

Positives

• The fix is surgically minimal — one token changed, nothing else touched.
• Cross-verified against WidgetTopBar.tsx:15 and Datagrid.editorPreview.tsx:55: the rendered class is widget-datagrid-paging-top, confirming the old selector never matched any element and the new one matches correctly.
• The footer counterpart (@container widget-datagrid-footer … #{$root}-paging-bottom) is identical in structure, so the fix makes the two blocks symmetric — easy to audit at a glance.
• CHANGELOG entry is present, user-facing, and free of implementation details, matching the repo convention.
• PR description is exemplary: explains root cause, the never-applied nature of the old rule, expected behaviour change, and a concrete test plan with exact widget configuration steps.