[Tarulatapriya]

Summary of Changes

Fixes #1511.

Currently, editing controls (Trim, Rotation, Audio, Adjustments, Text Overlays, Format, Image Overlays) are stacked vertically below the video player. Scrolling down to adjust any of these options causes the video player to scroll out of view, forcing users to constantly scroll back and forth to see their changes.

This PR makes the video preview sticky on desktop viewports (lg:sticky lg:top-16 lg:z-30 lg:shadow-md):

• When a video is uploaded, the preview card remains pinned at the top of the viewport below the sticky header while scrolling through tool options.
• Retains normal responsive flow on smaller screen sizes.

Verification

• npx tsc --noEmit — 0 errors.
• eslint — 0 errors, 0 warnings.
• npx next build --webpack — 0 errors, static export succeeded.

[netlify]

👷 Deploy request for reframe-os pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	f1a9b3c

[github-actions]

👋 Thanks for your PR, @Tarulatapriya!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @Tarulatapriya

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[chiragjangiir]

Technical Review of PR #1816: fix(layout): make video preview sticky while scrolling editing tools (#1511)

Addresses issue #1511 cleanly by pinning the video player preview on desktop viewports while users scroll through extended editing tools in the right sidebar.

Review Points:

1. Conditional Application: Applying file && "lg:sticky lg:top-16 lg:z-30 lg:shadow-md" via cn(...) ensures sticky positioning is only activated once a video file has actually been loaded into the workspace, preventing the empty upload dropzone from unexpectedly sticking.
2. Responsive Constraints: Scoping the behavior to lg: breakpoints ensures mobile and tablet viewports retain standard vertical document flow without obscuring tools or causing overflow clipping.
3. Z-index & Header Clearance: lg:top-16 provides sufficient offset below the fixed navigation bar, and lg:z-30 keeps the preview above scrollable tool panes without bleeding into modal dialogs or dropdown menus.

Clean and minimal fix. LGTM!