[BUG] [GSSoC'26] : Onboarding.tsx leaving the viewport.

[janmejay1438]

Bug description
For a first time viewer, the onboarding.tsx is responsible for giving a tutorial through the website but it is currently viewport and takes auto input.

Steps to reproduce
Steps to reproduce the behavior:

1. Clear the site settings.
2. Clear the site data.
3. Here is the video :-

20260522-1051-46.6130760.mp4

4. See error

Expected behavior
The onboarding experience should be a smooth sail without any bugs. Proper positioning and not feeling uncontrollable.

Actual behavior
It is all over the place currently.

Browser and OS info

• OS: Windows 11
• Browser: Chrome
• Version: Latest

I would love to work on this @magic-peach ma-am, If you deem it worthy under GSSoC'26. Thank you so much mam.
/assign

[github-actions]

👋 Thanks for opening an issue, @janmejay1438!

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!

[rahul-rajak-nsut]

/assign

[github-actions]

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

[rahul-rajak-nsut]

/unassign

[github-actions]

Hey @rahul-rajak-nsut, you have been unassigned from this issue. It is now open for anyone to pick up — comment /assign to claim it! 👋

[mallya-m]

Hi @magic-peach, I'd like to work on this under GSSoC'26.

I reproduced the issue — the onboarding overlay is escaping the viewport
bounds and accepting unintended inputs, likely due to missing position
constraints or z-index/overflow handling in Onboarding.tsx.

My approach:

• Audit Onboarding.tsx for positioning (likely needs position: fixed
  with explicit top/left/width/height constraints instead of absolute)
• Add overflow: hidden or pointer-event guards to prevent unintended
  background interaction during onboarding
• Ensure the component is bounded within 100vw / 100vh
• Test across desktop and mobile viewports

Stack: TypeScript, React, Next.js — fits perfectly.

/assign

GitHub: github.com/mallya-m

[github-actions]

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