[UX Bug] Dragging Brightness slider triggers global drag-and-drop overlay instead of adjusting value

[tharunika-19]

🐛 Bug Report

Description

When trying to drag the Brightness slider in the Adjustments panel, the app incorrectly
interprets it as a file drop event and shows the "Drop your video anywhere" overlay,
making the Brightness slider completely unusable via mouse drag.

This issue is isolated to the Brightness slider only — Contrast and Saturation sliders
work as expected.

Steps to Reproduce

1. Open https://reframe-lilac.vercel.app/
2. Scroll down to the Adjustments section in the left panel
3. Click and drag the Brightness slider
4. ❌ The "Drop your video anywhere / Release to start uploading" overlay appears
5. Brightness value does not change
6. Try the same with Contrast and Saturation sliders — they work fine ✅

Expected Behavior

• Dragging the Brightness slider should adjust its value smoothly
• The drag-and-drop overlay should only appear when dragging a file from outside the browser
• Behavior should be consistent across all three sliders (Brightness, Contrast, Saturation)

Actual Behavior

• Brightness slider drag activates the global file drop overlay
• Slider value remains unchanged
• Contrast and Saturation are unaffected

Root Cause (suspected)

The Brightness slider may be missing e.stopPropagation() on its drag events, or it has
a different event binding compared to the other sliders, causing the global dragenter /
dragover listener to incorrectly intercept its drag interaction.

Suggested Fix

Either add stopPropagation on the Brightness slider's drag events:

brightnessSlider.addEventListener('dragstart', (e) => {
  e.stopPropagation();
});

Or guard the global listener to only trigger for external file drags:

window.addEventListener('dragenter', (e) => {
  if (e.dataTransfer?.types?.includes('Files')) {
    showDropOverlay();
  }
});

Screenshots

Environment

• Browser: Chrome
• OS: Windows 11

Labels

bug ux 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.