fix(blog): move social share bar below banner + make it sticky

[Gagan202005]

Related Tickets & Documents

Fixes: keploy/keploy#3298

Description

• This PR improves the Social Share section (Twitter / LinkedIn / Copy Link) on the Keploy blog post pages by relocating it to the correct component and adjusting its placement to match the expected UI/UX.

• The share bar is now positioned below the blog banner, and follows a sticky scroll experience, similar to other sticky UI blocks like the TOC and ad banner.

Fix / Expected Behavior (Now Implemented)

• Social share component is now placed at the bottom of the blog banner area for correct visual hierarchy.

• It has a sticky behaviour so it remains accessible while scrolling (aligned with existing sticky patterns like TOC + ad banner).

• Works cleanly across responsive layouts and maintains proper spacing/alignment.

🛠️ What Changed

Code movement / restructuring

• Moved the social share UI block from:
  ✅ PostHeaderAuthors.tsx
  ➜ into:
  ✅ post-body.tsx

UI + behaviour updates

• Updated layout structure so share icons align properly with the banner header area.

• Improved spacing and responsive ordering to avoid overlap and visual jumps.

• Preserved existing functionality:

  Twitter share link

  LinkedIn share link

  Copy-to-clipboard button

  “Copied!” feedback message

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

• Confirmed correct placement right below the blog banner
• Verified sticky scroll behavior works smoothly on long posts
• Tested responsiveness + checked no overlap with ad banner/TOC

Demo

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

[amaan-bhati]

Hey @Gagan202005 Thanks for raising the pr, please add one more screenshot for the header, so that we can see what the header looks like after the removal of the socials component from there before i myself review it on local, it would be better if i can save time with the preview itself.

[Gagan202005]

Hey @Gagan202005 Thanks for raising the pr, please add one more screenshot for the header, so that we can see what the header looks like after the removal of the socials component from there before i myself review it on local, it would be better if i can save time with the preview itself.

Hi @amaan-bhati
here is the screenshot of the header
if you want any changes please let me know
Thanks !

[Gagan202005]

Hey @amaan-bhati
can you please review this pr when you get a chance
Thanks!