fix: make Preview Output sticky to prevent scroll (#348)

[Rohitk131]

Fixes #348

🐛 Problem

When scrolling down while editing the JSON data, the "Preview Output" panel also scrolls out of view, causing a bad user experience.

✅ Solution

Made the preview panel sticky using position: sticky to ensure it stays side-by-side and always visible, regardless of JSON scroll depth.

Screenshots or Video

![Preview Sticky Fix] (https://drive.google.com/file/d/1ErWiv0Q2TWDR1Tk1gRNT0XFsYiD3Whry/view?usp=sharing)

🧪 Tested On

• Chrome
• Firefox
• Responsive (Mobile / Tablet view)

---

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Vital features and changes captured in unit and/or integration tests
• Commits messages follow AP format
• Extend the documentation, if necessary
• Merging to main from fork:Rohitk131/i348/fix-preview-scroll

[netlify]

❌ Deploy Preview for ap-template-playground failed.

Name	Link
🔨 Latest commit	495ccdf
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67f50d71b8d94e0008e0d8f0

[Rohitk131]

Hi @DianaLease and team,

This PR addresses Issue #348, which pointed out a usability concern in the Template Playground — the "Preview Output" panel would scroll out of view when navigating through large JSON data, making side-by-side editing inconvenient.

🐞 Problem
Users had to frequently scroll up and down to cross-reference their input with the output, which negatively impacted the workflow and user experience.

✅ Solution
The fix applies position: sticky to the Preview Output panel, allowing it to remain visible as users scroll through the editor. This creates a smoother and more productive editing experience, especially for longer inputs.

I’ve tested the changes across different screen sizes and browsers to ensure responsiveness and consistency.

Looking forward to your feedback — happy to iterate if needed! Thanks for your time and all the great work on the project. 🙌