Skip to content

[BUG] [fix] onboarding tour tooltip clipped off-screen on the left side #1599

Description

@IshwinderKaur8

Bug description
When opening the application for the first time or initializing the user onboarding tour, the step-by-step introduction tooltip (e.g., "Format") is rendered partially off-screen on the left. The user can only see a portion of the modal and the "Next" button, cutting off the core explanation text.

Steps to reproduce
Steps to reproduce the behavior:

  1. Go to the live deployment link (e.g., https://reframe-lilac.vercel.app/?textOverlays=) or run the development server.
  2. Observe the onboarding tour tooltip that automatically appears on the left side of the screen before uploading a video.
  3. See the tooltip clipping out of the viewport.

Expected behavior
The onboarding tooltip should be fully visible within the viewport, properly aligned relative to its target element (or centered/padded safely away from the viewport boundaries) so that the text is entirely readable on all screen resolutions.

Actual behavior
The onboarding card/tooltip is pushed too far to the left, causing the left half of the card and its descriptive text to be hidden outside the browser's viewable area.

Browser and OS info

  • OS: Windows 11
  • Browser: Google Chrome
  • Version: 126.0

Video format (if relevant)
N/A

Screenshots/screen recording

Image

I am a GSSoC'26 contributor. Please assign this issue to me.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working correctlytype:bugBug fix

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions