(SP: 1) [Frontend] Fix Q&A mobile tap lock, pagination scroll, and table text contrast

[ViktorSvertoka]

Summary

• Move Q&A pagination scroll to the section level for consistent top-of-list behavior.
• Prevent mobile tap “lock” by clearing text selection before accordion/pagination interactions.
• Keep Q&A table text readable in dark mode by fixing table text color.

Changes

• frontend/components/q&a/QaSection.tsx
• frontend/components/q&a/AccordionList.tsx
• frontend/components/tests/q&a/use-qa-tabs.test.tsx

Testing

• Not run (UI change).

Notes

• Focused on mobile tap responsiveness after multiple accordion opens.

Closes: #275

Summary by CodeRabbit

• Improvements

  • Text selection is now automatically cleared when expanding accordion items for a smoother user experience.
  • Pagination scroll behavior refined to smoothly animate to the Q&A section instead of scrolling to the page top.

• Style

  • Adjusted text color styling on table elements for improved visual consistency.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ready	Preview, Comment	Feb 5, 2026 10:50am

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	c253133
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/698475f56661a30008d5f839
😎 Deploy Preview	https://deploy-preview-276--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR addresses Q&A usability issues by implementing text selection clearing to prevent mobile interaction lock, refactoring pagination scroll behavior to section-level with smooth animation, and improving table text contrast in dark mode. The scroll-to-top logic moves from automatic window scrolling to a managed ref-based approach triggered by page state changes.

Changes

Cohort / File(s)	Summary
Text Selection & Dark Mode UI frontend/components/q&a/AccordionList.tsx	Added clearSelection utility function and onPointerDown handler to AccordionTrigger to prevent text selection on interaction. Applied text-gray-900 dark:text-gray-900 classes to table for dark mode readability.
Scroll Management on Pagination frontend/components/q&a/QaSection.tsx	Introduced sectionRef and pendingScrollRef to manage section-level scrolling. Added clearSelection call in new onPageChange wrapper. Implemented useEffect that triggers smooth scroll-into-view via requestAnimationFrame when currentPage changes and loading completes.
Removed Automatic Window Scroll frontend/components/q&a/useQaTabs.ts	Deleted window.scrollTo call from handlePageChange, delegating scroll responsibility to component-level management.
Test Cleanup frontend/components/tests/q&a/use-qa-tabs.test.tsx	Removed window.scrollTo stub and related assertion from page-change test, aligning with refactored scroll behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #169: Modifies QaSection.tsx and useQaTabs.ts scroll behavior and pagination handling in the Q&A frontend
• PR #171: Updates AccordionList internals and AccordionTrigger/Item rendering behavior in Q&A components
• PR #129: Introduces related scrolling and selection behaviors across the same Q&A component files

Suggested labels

UI

Suggested reviewers

• AM1007

Poem

🐰 Hops with glee across the code
No more tap locks on mobile road,
Selection clears with pointer's grace,
Smooth scrolls grace the Q&A space,
Dark tables shine, so crisp and bright—
This rabbit hops with pure delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the three main changes: mobile tap lock fix, pagination scroll fix, and table text contrast improvement.
Linked Issues check	✅ Passed	All three objectives from issue #275 are addressed: pagination scrolls to section top via QaSection changes, text selection clearing implemented in AccordionList and QaSection, and table text color classes added for dark mode readability.
Out of Scope Changes check	✅ Passed	All changes align with issue #275 scope; removal of scrollTo from useQaTabs and test updates are necessary refactoring to support the new section-level scrolling behavior.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/qa-mobile-tap-pagination-table-contrast

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}