Set breakpoint to switch mobile interface

[wichaivitpat]

Description

I use Puck in component in website (iframe) but interface it's not suitable for small desktops.I see mobile interface in puck version 0.21.0 i want to use mobile interface in 1140px (width at puck component) but i can't set breakpoint to switch interface

Proposals

Proposal 1

Introduce mobileBreakpoint props for the puck configuration

<Puck
   config={...}
   viewports={[...]}
   metadata={...}
   overrides={...}
   mobileBreakpoint={1140} // or mobileBreakpoint={"1140px"}
/>

[FedericoBonel]

Hey @wichaivitpat! Thanks for reporting this.
I agree it would be great to support, especially since, as you mentioned, there are cases where people need more control over the mobile-to-desktop breakpoint.

Another option besides the one you mention could be to handle this via CSS variables:

.MyPuckWrapper {
  --breakpoint-mobile: 1440px;
}

This approach would also let you override the breakpoint using inline styles if needed.