fix: prevent TOC and Ad Banner from overlapping navbar

[aditya-cherukuru]

Related Tickets & Documents

Fixes: #3434

Description

When scrolling to the bottom of blog reading pages (/blog/technology/[slug] or /blog/community/[slug]), the Table of Contents (TOC) and Ad Banner were overlapping the navbar due to missing z-index constraints on sticky/positioned elements.

• Added proper z-index hierarchy to ensure TOC and Ad Banner stay behind the navbar
• Added max-height and overflow handling to prevent TOC from extending beyond viewport

Changes

• [components/TableContents.tsx](https://github.com/keploy/blog-website/blob/main/components/TableContents.tsx#L191): Added z-30 max-h-[calc(100vh-100px)] overflow-y-auto to the sticky TOC container
• [components/Adslot.tsx](https://github.com/keploy/blog-website/blob/main/components/Adslot.tsx#L52): Added z-30 to the Ad Banner wrapper

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• UI improvement (visual or design changes)

Testing

• Verified that navbar uses z-40 in [FloatingNavbar.tsx](https://github.com/keploy/blog-website/blob/main/components/navbar/FloatingNavbar.tsx#L43)
• TOC and Ad Banner now use z-30, ensuring they stay behind the navbar
• Scrolling to bottom of blog pages no longer causes overlap

Demo

Before: TOC and Ad Banner overlap the navbar when scrolling to the bottom of blog posts

After: TOC and Ad Banner stay behind the navbar, respecting the z-index hierarchy

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
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes