Service Studio is supposed to be a WYSIWYG IDE. However, when working with things displayed in conditional situations, the layouts tend to shrink, resize, warp, or whatever else, breaking the preview. Example:

This search with filters section is something very common to be found in many apps. This is a screenshot from the preview in Service Studio, and matches exactly what renders on the website after publishing.

 However a requirement came up to hide the bottom two under a role check, wrapping them in an If to only display them if they come up True:

If published, rendered it looks fine, but the preview in Service Studio breaks

There are some tricks; wrap the If in a container, put an empty container in the False branch... but those are just workarounds which shouldn't be necessary (and sometimes, as in the screenshots, they don't work)

The idea, in short, is: make Service Studio render the contents as the CSS rules say it will render, If or no If