Configure SliceZone simulator screen sizes

[raphael3 (Raphaël Badia)]

Describe your question/issue in detail

In the slice machine, I would love to be able to customize the breakpoints and add more.
For instance my mobile users mostly have screen width under 380px.

I'd also like to configure more screens, I usually work on 5 breakpoints. Is there any way to do that in the config ?

Impacted feature

SliceZone simulator

What steps have you taken to resolve this issue already?

I have searched the documentation but I haven't found anything.
Currently I create a new page on my website and put only the slice on which I'm working on, then I use the devtools to switch breakpoints.

Thanks!

[Phil (Phil Snow)]

Hi @raphael3 ,

Welcome to the community

In Slice Machine, you can define as many views as you want by clicking the + button shown here.

Does this help, or am I misunderstanding your question?

Thanks.

[raphael3 (Raphaël Badia)]

Hello and thank you for answering,

If I'm not mistaken, your screenshot is showing how to force an image to be resized, for a specific field.

I am talking about the size of the screen in the slice machine.

There is only three configurations: 390x844, 1080x810 and 1280x800
Found that in slice-machine-ui source code:

I find these limiting as I'm working on 5 screen sizes that are different.

Thanks,
Raphaël

[Phil (Phil Snow)]

Ahhh ok, I understand better now. Sorry about the confusion.

Yes there's no way to change these view ports, but I'm going to tag the Slice Machine team so they consider this as a feature request.

You can also submit and RFC on the Slice Machine Github.

[raphael3 (Raphaël Badia)]

Thanks for tagging the team, meanwhile I ended up using patch-package and replaced the breakpoints with the following

BREAKPOINT_XS="XS (360px)",s.BREAKPOINT_SM="SM (640px)",s.BREAKPOINT_MD="SM (768px)",s.BREAKPOINT_LG="LG (1024px)",s.BREAKPOINT_XL="XL (1280px)",s.BREAKPOINT_2XL="2XL (1536px)",s.CUSTOM="Custom";var O=(i={},(0,N.Z)(i,r.BREAKPOINT_XS,{width:360,height:667}),(0,N.Z)(i,r.BREAKPOINT_SM,{width:640,height:360}),(0,N.Z)(i,r.BREAKPOINT_MD,{width:768,height:1024}),(0,N.Z)(i,r.BREAKPOINT_LG,{width:1024,height:768}),(0,N.Z)(i,r.BREAKPOINT_XL,{width:1280,height:720}),(0,N.Z)(i,r.BREAKPOINT_2XL,{width:1536,height:975})

the file to change is /node_modules/slice-machine-ui/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-22770c807a7d7090.js

I am locking this dependency