feat(blog): improve TOC scrolling behavior and active highlighting

[Srinu346]

Related Tickets & Documents

Fixes:

Description

• Improved the Table of Contents (TOC) sidebar on desktop to allow independent scrolling without affecting the main page scroll position.
• Added active section highlighting that updates as the user reads through the blog post.
• Implemented auto-scrolling for the TOC list to ensure the currently active heading is always visible in the sidebar, preventing it from being hidden off-screen.

Changes

• components/TableContents.tsx:
  • Added max-height and overflow-y-auto to the specific TOC navigation container (not the outer sticky wrapper).
  • Applied overscroll-behavior: contain to prevent scroll chaining to the parent page.
  • Added logic to receive activeId prop and highlight the corresponding item in orange.
  • Implemented useEffect hook to auto-scroll the TOC list using scrollIntoView when the active section changes.
  • Assigned unique IDs to TOC item buttons for precise DOM targeting.
• components/post-body.tsx:
  • Added activeId state to track the currently visible heading.
  • Updated IntersectionObserver to set the activeId state (in addition to the existing URL hash update).
  • Passed activeId down to the TOC component.
• styles/index.css:
  • Added a .hide-scrollbar utility class to hide scrollbars cross-browser while maintaining scroll functionality for a cleaner UI.

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

• Verified on desktop view (≥1024px) that hovering over the TOC sidebar and scrolling moves only the sidebar content.
• Confirmed that scrolling to the top/bottom of the TOC does not trigger the main page scroll (overscroll containment).
• Tested scrolling through the main blog content and observed the TOC items highlighting in sync with the visible section.
• Verified that when scrolling past long sections, the TOC list automatically scrolls to bring the active item into view.
• Checked mobile view to ensure the dropdown functionality remains unaffected and working correctly.

Demo

Untitled.video.-.Made.with.Clipchamp.mp4

Environment and Dependencies

• New Dependencies: None
• Configuration Changes: None

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes