I would like the option to disable the xs/xl check since the current system is too basic to cover the wide variety of mobile and small screen scenarios that are possible. A single break point value could potentially be enough, but the system has overrides built in according to device capabilities and/or user agent info as far as I can tell. Without being able to control all of the variables, there’s no way to standardize behavior across the board.
When attempting to set the break point to 300px to effectively force all devices and platforms to use the xl layout, some devices still use xs regardless. When attempting to set the break point to 1440px to force a strictly width based system instead of device/capability + width, some scenarios still break the rule. Also, when trying to use a large px width like 1440, the mobile preview mode for xs becomes ineffective for actual mobile phones since the preview width and break point cannot be changed independently. So you end up trying to best-guess what it will look like squished down to 430px or constantly changing the break point value to test different scenarios inside of the xs layout. This also bumps into the overlay that triggers at 600px in xl mode while in the builder, regardless of what the breakpoint is set to. I end up having to hide/delete that sometimes in order to see how scaling works down to my breakpoint on desktop - at least until chrome’s 500px width limit kicks in which I sometimes have to bypass as well if I do not or cannot work in the device preview mode in chrome devtools.
Additionally, it seems like xl is the default. If no changes are ever made with the xs layout enabled, then the two layouts will always be technically identical on the backend. However, if anything is ever changed with the xs layout enabled, from that point forward there is no way to get back to the completely shared layout for a component and every change on a property that was touched in xs will now need to be done twice to keep the layouts in sync and since there’s no visible way to know which properties have variants, it makes the whole system feel inconsistent and frustrating. So, a way to remove existing layout variations would be great. I believe the only way to do so currently would be to export the app, modify the style data for the component in question, then reimport the app. I haven’t had the time and/or risk-tolerance yet to test whether the export/import workflow is solid with my production apps, so I do not know if that is a reasonable, safe to way to remove layouts from components.
A way to see at a glance when a property on a component is layout specific with a little “xl” or “xs” tag would also be great. It is cumbersome to toggle the layout modes back and forth to see what properties change and even when doing so, split properties with identical values are still technically changing, but you would not know without changing the values themselves and toggling layouts again.
I know this is verbose, but hopefully the level of detail is helpful. Some information here may be inaccurate, as this is just what I’ve gleaned from observation and working in the system. I’d be happy to elaborate or clarify further if needed.
Thank you for your time!