Inconsistent spacing and icon placement in search bar component on Home Page

[cherylpinto]

Description

The main search bar component exhibits styling inconsistencies that affect its visual alignment and usability. There are two primary issues:

1. An unexpected gap exists between the text input field and the search icon button.
2. The "clear" (X) icon is not positioned correctly at the far right of the input field.

---

Actual Behavior

• A noticeable gap is present between the rounded search input container and the search icon button, making them look like two separate elements instead of a single unit.
• The "clear" (X) icon is positioned closer to the middle of the input field rather than being aligned to the far-right edge. As a result we one searches for something the input overlaps the (X) button

---

Expected Behavior

• The search input container and the search icon button should be flush against each other, forming a single, cohesive component with a continuous border.
• The "clear" (X) icon should be aligned to the far right of the text input area, just before the search button, for a standard and predictable user experience.

Screenshots

---

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊