website: responsive layout broken at 320px breakpoint

[ianmcburnie]

I verified there's no existing issue for this bug.

• There are no existing issues

Current behavior

Looks like the website layout got broken and has introduced horizontal scrolling somewhere along the line. Possibly in some of the more complex layout examples like toggle button group.

Expected behavior

No response

Skin version

17.0.0

Device/OS/Browser info

No response

Steps to reproduce

1.
2.
3.
...

Relevant code block

No response

Additional context

No response

[ArtBlue]

We can verify this to be the case, but this may not be an issue. If I remember correctly, this may have been one of the drawbacks of the combination of having minimum button widths imposed and not being able to use container queries. I vaguely recall some compromises such as this, but we can verify.

[ianmcburnie]

We can verify this to be the case, but this may not be an issue. If I remember correctly, this may have been one of the drawbacks of the combination of having minimum button widths imposed and not being able to use container queries. I vaguely recall some compromises such as this, but we can verify.

I am just meaning that our Skin website itself shouldn't break at 320px. If you are saying this breakage is unavoidable/intentional then perhaps these layouts should be moved to a different page to avoid breaking the main skin page at 320. Feels like we need to demonstrate some kind of responsive solution though.

[agliga]

I believe this should be fixed by the redesign
We do have some components that break at <320, but those should be tackled at the individual component level

[ArtBlue]

I believe this should be fixed by the redesign We do have some components that break at <320, but those should be tackled at the individual component level

Agreed. I think we can close this for now and deal with the specific issue individually as we see them.