[UI Bug] Right sidebar overflows without scroll and layout breaks when no video is loaded

[tharunika-19]

🐛 Bug Report

Description

Two related layout issues observed in the right sidebar:

1. Sidebar is not scrollable – The right sidebar has a lot of content (multiple aspect ratio options, FIT/FILL buttons, etc.) but there is no scrollbar, causing content to extend beyond the viewport with no way to access it properly.

2. Unbalanced layout when no video is loaded – The left panel is completely empty (no video uploaded yet) but the right sidebar continues to grow vertically. This creates a visually broken layout where the right side is overloaded while the left side is blank.

Steps to Reproduce

1. Open https://reframe-lilac.vercel.app/
2. Do NOT upload any video
3. Scroll down on the right sidebar — observe it is not independently scrollable
4. Notice the left panel is empty while the right sidebar extends far below

Expected Behavior

• The right sidebar should be independently scrollable (overflow-y: auto or scroll)
• The sidebar height should be constrained to the viewport height
• Optionally, sidebar content could be collapsed or disabled until a video is loaded

Screenshots

Suggested Fix

/* Make sidebar independently scrollable */
.sidebar {
  height: 100vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

Environment

• Browser: Chrome
• OS: Windows 11

Labels

bug ui layout good first issue

[github-actions]

👋 Thanks for opening an issue, @tharunika-19!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[tharunika-19]

/ASSIGN/GSSOC2026

[github-actions]

Hey @tharunika-19, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[github-actions]

Hey @tharunika-19, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰

[tharunika-19]

Thanks for the reminder! I've identified the issue and proposed an approach to fix the alignment problem. I'm currently working on implementing and testing the solution. I'll share further updates soon.