Conversation
Signed-off-by: Kamakshi Mudgal <navyash110@gmail.com>
amaan-bhati
left a comment
There was a problem hiding this comment.
Thanks for tackling this DocSearch visual bug - the flexbox restructuring approach is reasonable and addresses the core overlap issues.
Consider working through a few things:
Issues to be Considered
1. Hardcoded right padding
A right padding of 110px is added to .DocSearch-Input to prevent text from overlapping the clear button. This is a magic number that may behave incorrectly across different screen sizes and browsers. Consider a more flexible flexbox-based approach so the clear button's actual rendered width determines the spacing.
2. Aggressive overrides on third-party component
The removal of box-shadow and inner borders entirely from .DocSearch-InputWrapper is a broad override on a third-party component. If Algolia ships a DocSearch update that changes its class structure, these rules could break silently. Consider adding a comment documenting the intent so future maintainers are aware.
3. No visual evidence
Please add before/after screenshots to the PR description. Screenshots will help the maintainer evaluate the fix quickly. Please also test across Chrome, Firefox, and Safari including on mobile.
Please also rebase against main as there are merge conflicts with other open PRs touching the same file.
What has changed?
The current search bar looks quite messy with the magnifying icon overlapping the orange border and the button "clear the query" coming half in the box and half out.
This PR tries to fix these issues but adjusting the orange border properly across full length and shifting the magnifying label to the left. Now, there is no overlapping of the icon and between the clear button and orange border.
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Please test this using - npm run start
Checklist: