Bug fix · Anas2604-web/repomind
Center onboarding modals and add keyboard tour navigation
Replaces offset-based onboarding modal placement with a flex-centered overlay. The PR also adds arrow-key navigation, outside-click dismissal, and clickable progress indicators for returning to earlier steps.
The problem
The previous tour used absolute positioning with hardcoded offsets, placing modals differently across screen sizes. Step definitions also selected different positions, so the modal moved around as users advanced through the tour.
The approach
The described implementation centers modals using a flex overlay with align-items and justify-content set to center, with scale and translateY animations for step transitions. The visible diff removes per-step position metadata and the unused highlight field from TourStep. The PR description also specifies animated progress pills, backward navigation through past indicators, arrow-key navigation, and outside-click dismissal.
What changed
The tour uses a consistent centered modal layout instead of step-specific offsets and supports additional navigation and dismissal controls. The implementation diff is truncated, so the layout and interaction details are supported by the PR description rather than fully visible code.
- onboarding
- typescript
- flexbox
- responsive-layout
- keyboard-navigation