Bug Report 🐛

When editing JSON data in the Data section at the bottom of the playground, the Preview Output panel on the right scrolls out of view. This makes it difficult to see real-time updates while editing, requiring the user to scroll up and down repeatedly.

Expected Behavior

The Preview Output panel should either:

• Stay fixed on the right side while scrolling the Data and Template sections
• Or have a split-screen/side-by-side view for better visibility

Current Behavior

The preview output scrolls with the page. As soon as you scroll down to the bottom to edit the JSON, the preview disappears from the screen. You need to scroll up manually to view the changes.

Possible Solution

Apply position: sticky or position: fixed to the Preview Output panel. This would keep the preview in place, allowing users to see output live without extra scrolling.

Steps to Reproduce

1. Visit the Accord Project Playground
2. Scroll down to the Data section and start editing the JSON
3. Notice that the Preview Output panel scrolls away and is no longer visible
4. To see the preview, you need to scroll back up

Context (Environment)

This affects user experience especially during development and testing templates, where constant preview is essential.

Desktop

• OS: Ubuntu 22.04
• Browser: Chrome
• Version: 123.0.X

Detailed Description

Having the preview fixed would drastically improve the usability and efficiency of the template-building workflow.

Possible Implementation

• Wrap the Preview Output panel in a container with position: sticky; top: 0;
• Alternatively, introduce a two-column layout where the preview stays pinned to the right and scrolls independently