Skip to content

fix: DocSearch input styling#792

Open
kams05-ops wants to merge 1 commit intokeploy:mainfrom
kams05-ops:fix/-DocSearch-input--styling
Open

fix: DocSearch input styling#792
kams05-ops wants to merge 1 commit intokeploy:mainfrom
kams05-ops:fix/-DocSearch-input--styling

Conversation

@kams05-ops
Copy link
Copy Markdown
Contributor

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.

Screenshot 2026-02-14 141511 Screenshot 2026-02-14 143501

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.

image Screenshot 2026-02-14 143550

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue).
  • [-] New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to not work as expected).
  • Documentation update (if none of the other choices apply).

How Has This Been Tested?

Please test this using - npm run start

Checklist:

  • [-] My code follows the style guidelines of this project.
  • [-] I have performed a self-review of my own code.

Signed-off-by: Kamakshi Mudgal <navyash110@gmail.com>
Copy link
Copy Markdown
Member

@amaan-bhati amaan-bhati left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants