Skip to content

fix(layout): make video preview sticky while scrolling editing tools (#1511) - #1816

Open
Tarulatapriya wants to merge 1 commit into
reframe-oss:mainfrom
Tarulatapriya:fix/sticky-video-preview
Open

Tarulatapriya wants to merge 1 commit into
reframe-oss:mainfrom
Tarulatapriya:fix/sticky-video-preview

Conversation

@Tarulatapriya

Copy link
Copy Markdown
Contributor

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

netlify Bot commented Oct 18, 2026

Copy link
Copy Markdown

👷 Deploy request for reframe-os pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit f1a9b3c

@github-actions

Copy link
Copy Markdown
Contributor

👋 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

Happy coding! 🎉

@github-actions github-actions Bot added level:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design labels Oct 18, 2026
@github-actions

Copy link
Copy Markdown
Contributor

✅ 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.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] : Redesign layout to keep video preview visible and organize tools (Fix excessive scrolling)

1 participant