feat: devnext change to flex UI layout

[ecp4224]

Explanation

Currently, the devnext UI uses a top-down layout in the demo page and doesn't center items. This PR updates the demo page to add flexboxes to split the connected page vertically and to center the connecting page. These changes make the UI easier to read at a glance

References

Screen.Recording.2024-03-01.at.1.50.10.AM.mov

Changelog

Checklist

• I've updated the test suite for new or updated code as appropriate
• I've updated documentation (JSDoc, Markdown, etc.) for new or updated code as appropriate
• I've highlighted breaking changes using the "BREAKING" category above as appropriate

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.48%. Comparing base (a0af2a3) to head (7563cf0).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #719   +/-   ##
=======================================
  Coverage   81.48%   81.48%           
=======================================
  Files         173      173           
  Lines        3446     3446           
  Branches      805      805           
=======================================
  Hits         2808     2808           
  Misses        638      638           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[omridan159]

LGTM