Description

🔍 Fix Search Input & Cross Button Alignment

📌 Description

This PR fixes the styling of the search input box.

• Previously, the placeholder text, search icon, and clear (cross ✕) button were misaligned inside the rounded input field.
• Updated styles ensure proper vertical alignment and spacing for all elements.

🖼️ Screenshots

Before

After

✅ Changes Made

• Adjusted padding and line-height for input text.
• Centered the search icon vertically.
• Fixed alignment of the clear (cross ✕) button.
• Maintained consistent rounded borders and background gradient.

🧪 Testing

• Verified input renders correctly across screen sizes.
• Confirmed proper alignment for placeholder, search icon, and clear button.
• Tested with empty input (placeholder visible) and typed input (cross button visible).
• Cross button works as expected to clear input.

Fixes #395

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers/devices
• My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
• This is already assigned Issue to me, not an unassigned issue.