Fix Search Popup Overflow on Large Screens

[vikasverma101]

📌 Description
This PR fixes the desktop search popup overflowing beyond the viewport on large screen sizes.

Previously, the search dropdown used fixed widths and right-side positioning, which caused the popup to extend outside the visible viewport under certain desktop layouts. This affected the responsiveness and overall user experience.

✨ Changes Made
Replaced fixed-width styling with responsive viewport-based sizing.
Improved popup positioning to ensure it remains fully visible within the viewport.
Preserved the existing desktop and mobile search behavior.
Maintained the current UI design and animations.
🐛 Problem Solved
Prevents the search popup from overflowing on large desktop screens.
Ensures the entire search interface remains accessible and visible.
Improves responsive behavior across different screen sizes.
🧪 Testing
✅ Tested on large desktop screens
✅ Tested on laptop resolution
✅ Tested on tablet viewport
✅ Verified mobile layout remains unaffected
✅ No console errors
✅ Existing search functionality works as expected
📸 Screenshots
Before

After

Checklist
Code follows the project's coding standards.
Responsive behavior has been verified.
No existing functionality was broken.
Ready for review.

closes #7884

[retenta-bot]

This pull request effectively resolves the overflow issue of the search popup on large desktop screens by adopting responsive sizing. This aligns with previous decisions made to enhance user experience and responsiveness. Great job on ensuring that existing functionality remains intact and that the mobile layout is unaffected! Looking forward to your contributions. 😊

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

✨ No significant bundle size changes detected.

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	3985.29 KB	3985.28 KB	+0.01 KB (+0.00%)
Total CSS	331.41 KB	331.41 KB	0 B

[Aamod007]

Thanks for fixing the search panel layout! The adjustment to positioning (\left-0 right-0 mt-5) correctly centers and aligns the search dropdown to prevent clipping.

This is a clean and straightforward CSS fix. Everything looks great!

Label Justification:

• \level:beginner: Assigned based on 1 file changed (a simple CSS positioning adjustment).
• \quality:clean: A clean, straightforward fix.
• \ ype:bug: Addresses a layout bug for the desktop search panel.
• \mentor:Aamod007: Assigned as required.

[github-actions]

🎉 Congratulations @vikasverma101! Your PR has been successfully merged. 🚀

Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.

⚠️ Important for GSSoC Contributors:
You are strictly advised to join our Discord Server as it is mandatory for all GSSoC participants. All important announcements, point claims, and community discussions happen there.

Keep building! 💻✨