Warn users when combining min and max width breakpoints

[johnsicili]

As a user, I should be warned about the impending complexity I'll add to my site when adding a breakpoint with a direction that is different than my existing ones (e.g. selecting min-width when my current is max-width).

I often open users sites and see the base breakpoint in the middle of the default breakpoints and custom breakpoints. I can't even comprehend designing a site this way and assume its by mistake on most if not all sites. Is there a use case for this?

Todo

• [ ] add a warning hint when adding manually a breakpoint (aka not recommended more than X) only when there are more than X
• [ ] add a toast when pasted instances created additional breakpoints (so that user notices them better)
• [ ] limit total amount breakpoints to something like 10

[TrySound]

Probably not coincidence. The guy told me copy paste from webflow leads to such breakpoints.

[kof]

Shouldn't be, webflow's breakpoints should match ours

[TrySound]

Looks like we add xl in some cases

[TrySound]

Yep, that's webflow 🤷

[kof]

I don't see whats wrong. This is exactly how it works in webflow, large breakpoints are min-width, default once are max-width.

[kof]

We add breakpoints when pasted elements use them.

[kof]

@johnsicili when user copies breakpoints from webflow, they already copy decisions made there, so its not up to us. Webflow doensn't encourage using extended breakpoints, they are off by default. I don't see why we should be warning them.

[kof]

The only problem is when they change breakpoints in webstudio and THEN also copy the once from webflow - then someone will be in a world of pain but that's somewhat difficult to warn.

MAybe when a 5th+ breakpoint is getting added, start warning them every time a new breakpoint is being created?

[johnsicili]

Odd, I've opened a lot of projects and the 1440 was actually to the right of base. But yeah lots with 1440 to the left too and I didn't realize it's from Webflow paste.

I would bypass a warning if pasting (or use this feature https://github.com/webstudio-is/webstudio/issues/3442) but if they manually create one then it seems sensible to warn them. Then again, there are a gazillion things they can do that'll make their life harder and we aren't putting warnings all over.

Those are my thoughts feel free to do what you want with this issue.

[kof]

It must be users changed it from min-width to max width

[kof]

I mean its ok to warn once when first the breakpoint gets created on paste, once its created its not going to warn any more because its not going to be new. When user creates one manually, its actually pointless to warn, they are intentionally doing it

[kof]

At max we can show a hint in the breakpoints editor popover that we don't recommend creating more than X breakpoints beause of xyz, yellow triangle.

So user that wants to create more gets the idea.

[johnsicili]

Yellow triangle sounds good. Also I disagree about not warning them if they manually do it. Users will do anything they can and not all know the implications.

Here's a real site:

[kof]

@johnsicili that screenshot is madness, if someone is doing it they will not be able to use the platform overall. Also we should probably limit the total amount just for someone like this to lets say 10 or something