Refactor: create responsive previews in the form builder

[JoshuaHungDinh]

Resolves GIVE-268

Description

This pull request (PR) introduces enhancements to achieve a width-responsive preview in the form builder by removing the sidebars from their fixed positioning. This creates a more similar experience as the WP block editor.

Changes include:
interface-interface-skeleton__content

• Set height to allow content to be scrolled
• Set overflow-y to allow content to scroll

.interface-interface-skeleton__body

• Hide overflow so entire body does not scroll

.givewp-next-gen-sidebar

• remove fixed positioning

Affects

The visual form builder sidebars

Visuals

Screen.Recording.2024-02-29.at.11.22.24.AM.mov

Testing Instructions

• Toggle the sidebars on each form builder section'Build', 'Design' & 'Settings', the content section should expand and retract accordingly.
• Each sidebar should be scrollable.
• The preview content should be scrollable.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[pauloiankoski]

@JoshuaHungDinh Nice job on making this finally work! I have only very tiny suggestions for you. On .interface-interface-skeleton__content, set the height to be calc(100vh - 60px), discounting the heading bar so that the scrollbar doesn't go over the end of the page. After that, you may need to reduce the lower padding a little bit to make it look nicer.

[JoshuaHungDinh]

@pauloiankoski Resolved: da26bdb

[pauloiankoski]

Good to go! 👏🏻 👏🏻 👏🏻

[rickalday]

Passed manual QA tests.