Improve visibility of focused elements in Course and Lesson tours

[Imran92]

Resolves #7556

Proposed Changes

In some scenarios (especially when using the Astra theme), for a couple of steps in the Course tour (especially when there are many lessons in the Course outline block, for example, when the user installs the dummy Course from Sensei home and then takes the Tour using that particular course), and particularly when the screen size is small, the focused element got partially hidden behind the Tour modal, especially the Save Lessons step. We've added some improvements here by scrolling the action area to the center to make them more visible to the user.

Testing Instructions

1. Create a site with new installation of Sensei
2. Use your laptop's display for testing (Or any small monitor)
3. Set Astra as your theme
4. Go to SenseiLMS -> Home -> Click on "Install a demo Course"
5. Then click on "Edit Demo Course"
6. You'll be taken to the Course and the tour should start
7. Take the whole tour and make sure none of them get significantly hidden behind the tour modal
8. Try with other popular themes
9. Try editing any of the lessons and take the lesson tour, make sure all of the steps are visible

Screen.Recording.2024-04-01.at.4.39.27.PM.mov

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Legacy courses (course without blocks) are tested
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[github-actions]

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit ad1632c and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
admin/tour/course-tour/index.js			36.4 kB	+142 B ( +0.4% 🔼 )
admin/tour/lesson-tour/index.js			36.6 kB	+68 B ( +0.19% 🔼 )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

[codecov]

Codecov Report

Attention: Patch coverage is 4.00000% with 24 lines in your changes are missing coverage. Please review.

Project coverage is 51.76%. Comparing base (da10776) to head (ad1632c).
Report is 1 commits behind head on trunk.

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk    #7570      +/-   ##
============================================
- Coverage     51.78%   51.76%   -0.03%     
  Complexity    11323    11323              
============================================
  Files           641      641              
  Lines         48165    48186      +21     
  Branches        469      470       +1     
============================================
+ Hits          24941    24942       +1     
- Misses        22844    22863      +19     
- Partials        380      381       +1     

Files	Coverage Δ
assets/admin/tour/helper.js	77.27% <25.00%> (-5.23%)	⬇️
assets/admin/tour/lesson-tour/steps.js	30.70% <0.00%> (-1.00%)	⬇️
assets/admin/tour/course-tour/steps.js	1.65% <0.00%> (-0.20%)	⬇️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b59c56b...ad1632c. Read the comment docs.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[renatho]

Looks good and works well!

I just have a small suggestion to update the lesson tour to also use the scrollToCenter for the correctAnswerField since now we have this function.

[Imran92]

I just have a small suggestion to update the lesson tour to also use the scrollToCenter for the correctAnswerField since now we have this function.

Sure! I've moved the function to helper file and am using that in both places now, it's done here 7c245c7.

Also I've added some additional calls here 1687172 to try to improve the visibility a bit in lesson steps as well

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[renatho]

Looks good and works well!