feat: add scrollbar to table of contents on long articles

[AnujShrivastava01]

Pull Request: Add Scrollbar to Table of Contents

Description

Implements a scrollable Table of Contents component for long articles, improving user experience by allowing independent scrolling of TOC without affecting page scroll position.

Fixes keploy/keploy#3543

🔧 Changes Made

• Added max-h-[80vh] to limit TOC height to 80% of viewport height
• Added overflow-y-auto to enable scrollbar when content exceeds max height
• Added pr-2 for proper scrollbar spacing and padding

Files Changed

• components/TableContents.tsx

Testing

• Tested on desktop layout (lg breakpoint)
• Verified scrollbar appears on articles with 10+ sections
• Verified scrollbar does not appear on short TOCs
• Cross-browser tested (Chrome, Firefox, Safari)
• Mobile layout unaffected

Screenshots/Preview

Before: TOC extends beyond viewport without scrollbar

After: TOC has scrollbar when content exceeds 80vh

Checklist

• Code follows project style guidelines
• Self-reviewed the code
• Added/updated relevant comments
• No breaking changes
• Tested on multiple screen sizes
• Commit message follows conventional commits
• DCO sign-off included

---

[Copilot]

Pull request overview

This PR adds a scrollable table of contents (TOC) for long articles on desktop layouts, preventing the TOC from extending beyond the viewport. The implementation restricts the TOC height to 80% of viewport height and enables vertical scrolling when content exceeds this limit.

Changes:

• Added scrolling behavior to the desktop TOC navigation element with Tailwind utility classes
• Applied max-height constraint, overflow scrolling, and padding for scrollbar spacing

Comments suppressed due to low confidence (1)

components/TableContents.tsx:59

• The resizeHandler logic at line 58 checks if container.clientHeight > window.innerHeight * 0.8 to determine whether to show a dropdown list. However, with the new max-h-[80vh] constraint applied to the nav element, the container's clientHeight will never exceed 80vh (0.8 * window.innerHeight), making this condition always false. This breaks the intended behavior of switching to a dropdown when the TOC is too tall. The logic should check the scrollHeight instead of clientHeight, or the threshold should be adjusted to account for the max-height constraint.

    function resizeHandler() {
      setIsList(container.clientHeight > window.innerHeight * 0.8);
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[amaan-bhati]

Hey @AnujShrivastava01 Thanks for raising this pr, before i review this on local, can you please also share a preview screenshot for how it looks in smaller screen sizes as well?

[AnujShrivastava01]

Hii @amaan-bhati Sir, thanks for checking this out!

I’ve added preview screenshots for smaller screen sizes in the PR description above. The layout has been tested to ensure proper spacing, alignment, and responsiveness on mobile and small-width viewports.

---

---

[AnujShrivastava01]

@amaan-bhati Sir, please review the changes.
I have tested the fix thoroughly and made all necessary updates to resolve the issue.

Thank you.

[AnujShrivastava01]

@Achanandhi-M Sir, please review the PR.
I have tested the fix thoroughly and made all necessary updates to resolve the issue.

Thank you.