feat: make pricing comparison table headers sticky on scroll

[rishiraj38]

Description

This PR makes the pricing page's features comparison table headers sticky on scroll, staying docked right below the main sticky navigation bar while keeping horizontal scrolling on smaller screens intact.

Changes Proposed

• Wrapped the comparison table header rows in a semantic <thead> block inside comparison.js.
• Applied position: sticky; top: 80px; z-index: 10; to the <thead> element so that both header rows stay docked and stack dynamically under the navigation bar (without overlaps or gaps when text wraps).
• Set solid background overlays on the header cells using theme variables (props.theme.body and props.theme.secondaryColor) to prevent scrolling table content from showing underneath the headers.
• Set the overflow on the wrapper container (.main) to overflow: visible on desktop width screens (@media (min-width: 992px)) so that vertical sticky positioning works natively while preserving overflow-x: auto on mobile/tablets.

Screen.Recording.2026-06-28.at.12.45.42.AM.mov

Fixes #7665

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7830/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[Bhumikagarggg]

@rishiraj38 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[Rajesh-Nagarajan-11]

Most popular looks little cut off , have a look and also noticed while scrolling text appeared on background

[rishiraj38]

Most popular looks little cut off , have a look and also noticed while scrolling text appeared on background

Fixed.