Example Page Layout Changes

In the current design the sketch preview is pushed out of view if the corresponding code segment is long. This demands a lot of scrolling from the user, to edit the code and view the output.

Screenshot 2022-08-17 at 5.47.45 PM.png

Instead the layout should shift to a side-to-side, this would give the following benefits :

  1. Keeps the position of the sketch preview fixed in view.
  2. Allows sketch controls to move away from overlapping the view.
  3. Allows the code to be freely scrollable and editable
  4. Gives an experience similar to the editor

https://www.figma.com/file/s07vy3Z8JN7FvBIU50hJQs/Untitled?node-id=2%3A2