fix: test apps mobile breakpoint config [ALT-1167]

[primeinteger]

Purpose

Fixes rendering for mobile breakpoint styles in the test apps.

Approach

The mobile breakpoint definition in the test apps was using the query <360px that was lower than the previewSize 390px. Essentially telling the UI to render a 390px wide iframe preview and apply mobile styles when the viewport is below 360px.

I changed the mobile breakpoint query to <576px to match the example custom breakpoints registration

Updating Breakpoints

For experiences created with the previous breakpoint config, each dev/user will need to update their experiences using the "Update breakpoints" button that displays in the design sidebar when no component is selected:

And then "Update breakpoints" in the confirmation modal:

Once the breakpoints are updated in the experience, the mobile styles work as intended again:

Screen.Recording.2024-08-29.at.9.54.30.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
experience-builder-test-app	✅ Ready (Inspect)	Visit Preview	Aug 30, 2024 4:11am