Add CSS range syntax to breakpoints settings page

[mcslayer]

Done

Updated breakpoints settings page to use new CSS range syntax, based on conversation in #5287

Fixes #5394

QA

• Open breakpoint-settings page

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• [x] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [x] Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• [x] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshot

[webteam-app]

mcslayer is not a collaborator of the repo

[bartaz]

Demo: https://vanilla-framework-5395.demos.haus/docs/settings/breakpoint-settings

[bartaz]

Thanks @mcslayer. Just a small suggestion for future PRs: when you are mentioning issues that PR fixes add Fixes before the issue id. Only this way GH will automatically close the issue when PR is merged. I fixed that here in the description.

[mcslayer]

Oh, that's right. I applied this approach in the initial pull requests, but later concluded that it doesn't look very elegant. I apologize for the oversight and will be more careful moving forward.