[BUG] Chapter page issues #188

[ankitaniket]

Summary of Changes

This pull request addresses the issues mentioned in #188 related to the chapter page.

The key improvements include:

• Adjustment of the verse selection dropdown size.
• Proper alignment of verse numbers to eliminate excess space.
• Implementation of closing the dropdown by clicking outside the box.
• Direct navigation to a verse page by clicking on its number.

Screenshots

Please Review

Your feedback and review on these changes would be greatly appreciated.

[vercel]

@ankitaniket is attempting to deploy a commit to the Gita-v2 Team on Vercel.

A member of the Team first needs to authorize it.

[samanyougarg]

Hare Krishna!
Thanks for submitting the PR. It looks good overall.

2 issues:
https://www.loom.com/share/08a39b0f61a347a39741e3610ba02919

1. There is a flickering happening when hovering over the verse numbers.
2. On clicking a verse, it is opening the verse page as per requirement but for <1 seconds, it shows the filtered verse on the same page first. This should instantly open the verse page.

[samanyougarg]

Also, for mobile, earlier one was better since the click area for each verse number was a bit more.

[ankitaniket]

Hare Krishna
Thank you for bringing these issues to my attention. I've made the necessary adjustments to address them:

• Resolved the flickering issue.
• Eliminated the occurrence of filtering verses on the same page before navigating.
• Retained the earlier UI for mobile view, as it provided a better click area for each verse number.
• Increased the width for verseCount greater than 50, ensuring consistency for both mobile and desktop views.

Your feedback is valuable, and I appreciate your time in reviewing the proposed changes.

[samanyougarg]

Hare Krishna, thanks for resolving those issues.

Please see the margin on the left side here.

[samanyougarg]

On mobile, center alignment of the verses is not optimal. We should keep it left aligned.

[ankitaniket]

Hare Krishna!
Thanks for the suggestion. I have applied margin and left alignment for mobile devices. Please review it once.

https://www.loom.com/share/afed89b549ef4b7a92c4b9114397b99f?sid=4c0dab9f-27d5-4646-8885-682f6f682647