Addon Viewport: Add responsive mode

[yannbf]

Closes #12586

What I did

Brought #12627 back to life!

Note: there might be possible breaking changes here. We gotta test this really well.

How to test

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[socket-security]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	✅ 0 issues
Bin script shell injection	✅ 0 issues
Shell access	✅ 0 issues
Uses eval	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
GitHub dependency	✅ 0 issues
New author	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	+/- Transitive Count	Publisher
use-debounce@9.0.4	None	+0	xnimorz

[MichaelArestad]

I would prefer changing "Responsive" to "Custom" since it functions as a list of sizes and Responsive isn't as clear to me as Custom.

[JReinhold]

@yannbf you're considering this a breaking change, can you elaborate?

[salex97]

Would it be possible to add a feature for responsive viewport resizing, similar to browser dev tools (drag&drop resizing)? This would be a game-changer! Being able to resize the viewport dynamicly (besides fixed sizes like "iPhone 14") is a great way to get a feel of the responsive ui around breakpoints. This would significantly enhance the development experience inside of StoryBook.

dev.tools.responsive.layout.mp4

[yannbf]

Hey @salex97 a feature exactly like that (with the handles) is tough to implement, but this PR does allow you do click and drag the height/width slider like in Figma:

[cdedreuille]

Just to give a bit clarity on this one, we did a POC during our last hackathon. This feature was located in the addon itself to avoid having to touch directly on the preview. I completely agree that this feature need a more global structure to allow handles on the preview itself.

For now I don't believe we have any plan to continue working on it so I'll close this PR. Hopefully we can improve that very soon though.