Improve mobile responsiveness of Kolibri Onboarding tour

[shruti862]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Description

While testing the onboarding tour in the Learn > Library page, I noticed several responsiveness issues on smaller screens:

Issues observed

1. Spotlight misalignment on navbar

• On smaller screen sizes, when the navbar items wrap into a second line, the spotlight does not correctly highlight the Library tab.

2. Target element not scrolled into view

• When the tour step targets an element that is not visible in the viewport, the tooltip still renders.

3. Tooltip overlapping spotlight area

• In some cases (example: targeting channels card), the tooltip overlaps directly on top of the spotlighted area.

Steps to Reproduce

1. Start the onboarding tour on the Library page.

2. Resize the browser window to a smaller mobile width or use device simulation in DevTools.

3. Observe misalignment on navbar Library tab in first step of the tour.

4. Observe tooltip overlapping spotlighted content for the second step of the tour.

5. Observe tooltip rendering before scrolling into view for the third step of the tour.

Expected Behavior

• Spotlight should dynamically adjust to element position even if navbar shifts.

• Tour should automatically scroll target elements into view before rendering tooltips.

• Tooltips should avoid overlapping the spotlight region.

[shruti862]

Hey @LianaHarris360 , please let me know when can I get back to this issue again !