fix(website-builder-react): stack Grid columns via CSS media query

[adrians5j]

Problem

Grid column stacking is resolved in JS from the runtime viewport breakpoint (breakpoint === stackAtBreakpoint) and applied as inline styles.

On SSR the breakpoint is always desktop, so the served HTML renders columns side-by-side and only corrects once the client hydrates and re-resolves the breakpoint. That causes a layout flash — and stays broken entirely when the content subtree doesn't hydrate (e.g. content rendered via next/dynamic({ssr:true})), which is how this surfaced on an OpenNext/SSG frontend: a grid set to stack at mobile stayed 2-column at mobile width.

Fix

Emit stacking as a scoped CSS media query in the rendered HTML, so the browser applies it by the real viewport width — no JS, no hydration dependency, no flash.

• Grid renders a scoped class wb-grid-<element.id> plus a <style> block:

  @media (max-width: <breakpoint-width>px) {
    .wb-grid-<id> { flex-direction: column !important; }
    .wb-grid-<id> > .wb-grid-col { flex: 0 0 100% !important; max-width: 100% !important; }
  }

• The stack width is read from the theme's breakpoint definition (no hardcoded widths).
• ContentSdk.init now populates viewportManager breakpoints on the server too (the resize listener stays client-only), so SSR has the real widths to generate the media query.
• CSS/class string building lives in gridStyles.ts (createGridClass, createGridStackingCss), not inline in the component.

Screenshot

Scope

Grid stacking only. Multiple grids and nested grids are safe (unique per-id class + direct-child combinator). Deliberately out of scope, as follow-ups:

• Per-breakpoint styles for all elements (e.g. responsive rowGap/columnGap, spacing, visibility) — same JS→@media treatment, generalized.
• Per-breakpoint content (text/RTE per breakpoint) and responsive images (<picture>/srcset).
• The content-hydration gap and SSG draftMode behavior (orthogonal bugs).

Testing

• Verified the @media block is present in the SSR HTML and the browser stacks columns at the breakpoint width with no client JS.
• Builds clean; changed files formatted (oxfmt) and linted (oxlint).

🤖 Generated with Claude Code

[adrians5j]

Superseded — recreating against release/6.4.10.