[Fixed]: Cross Icon Appears Above Text in Search Bar Across `Tribes`, `People` and `Bots` When Typing Long Inputs

Problem:

When we type something long in the search bar, a cross icon appears above the text across all routes like Tribes, People and Bots.
Additionally, people often search pages so quickly that they do not write a string in the proper way; after 3 or 4 words, they start searching.

Expected Behavior:

When a user types something lengthy in the search bar, the cross icon should not obstruct the text. Instead, it should appear in a position that does not cover the text, ensuring all routes like Tribes, People and Bots are accessible and the user experience remains intuitive and unobstructed.

closes: #443

Issue ticket number and link:

Ticket Number: [ 443 ]
Link: [ https://github.com/stakwork/sphinx-tribes-frontend/issues/443 ]

Evidence:

Please see the attached video as evidence. https://www.loom.com/share/da81c4b9fc53491e93d3e03262c06d98

Testing:

Browser Compatibility:

Extensively tested on Chrome to ensure the fixes work as expected and the behavior is consistent across various test cases.

Checklist before requesting a review

[x] I have performed a self-review of my code
[x] Bug fix (non-breaking change which fixes an issue)
[x] I have tested on Chrome
[x] I have provided a recording

stakwork / sphinx-tribes-frontend