fix: fixed the position bug of section underline for heading text

[vaidik-bajpai]

Related Tickets & Documents

Fixes: #3849

Description

• This PR resolves a UI bug where the orange indicator lines below the "Recent Technology Blogs" and "Recent Community Blogs" sections would shift or misalign during screen resizing.

• The issue was caused by the parent <h3> tags lacking relative positioning. Because the indicator <span> elements were set to absolute, they were positioning themselves relative to the nearest positioned ancestor (or the viewport) instead of the heading itself, leading to erratic layout behavior when the window was resized.

Changes

• Added the relative Tailwind class to both <h3> section headers in [components/topBlogs.tsx]
• Ensured that absolute-positioned indicator spans are correctly anchored to their respective heading containers.

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

• Tested responsiveness across Desktop (1280px) and Mobile (360px) viewports using browser developer tools.
• Confirmed that the orange lines remain perfectly aligned with the text during active window resizing.

Demo

• This screenshot shows the changes in action. The underline appears below the heading text in mobile view.

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

[Copilot]

Pull request overview

This PR fixes a responsive UI issue where the orange underline indicator under the “Recent Technology Blogs” and “Recent Community Blogs” headings could drift during resizing, by ensuring the absolutely positioned underline spans are anchored to the heading element.

Changes:

• Added relative positioning to the two <h3> section headings in TopBlogs.
• Ensured the existing absolute underline <span> positions relative to the heading container.

---

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