fixed the search bar and search icon alignments in the navbar search box

[Prthmsh7]

What has changed?

This PR improves the alignment and visual consistency of the DocSearch button (navbar search box) and the DocSearch modal panel.

before:

Type of change

• [ yes ] Bug fix (non-breaking change which fixes an issue). (A minor UI change)

How Has This Been Tested?

• Ran npm run build successfully.

outputs :

• Verified changes locally using npm run serve.
• Tested alignment and focus states across:
• Checked Hover and focus interactions

Checklist:

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

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[amaan-bhati]

Hey @Prthmsh7

Thanks for raising this and trying to help us improve. The ui for the search bar was earlier improved more or less, in this pr, i think the changes would only be reelvant for the mobile ui, since the ui of the updated docs nav search input looks good now and isnt breaking anymore.

[amaan-bhati]

Thank you for improving the search bar alignment! Consistent UI polish in a docs site matters a lot for first impressions, and the before screenshots clearly show the misalignment issue that needed fixing.

Issues to be Considered:

• The PR includes before screenshots but no after screenshots. Please add after screenshots showing the fixed state across at least one light-theme and one dark-theme view - this is the most important missing piece for reviewers to assess the change without running the site locally.

• The updated CSS targets DocSearch internal class names (.DocSearch-Button, .DocSearch-Button-Placeholder, .DocSearch-Button-Keys, .DocSearch-Modal, etc.). These are not part of the Docusaurus public API and can change when the @docsearch/react package is updated. Please note which version of DocSearch these overrides were written against so maintainers know when to re-audit the CSS.

• The height: 44px hardcoded on .DocSearch-Button may not scale well at smaller breakpoints. Please verify the search button renders correctly on mobile viewports (typically below 768px), especially since the button layout and placeholder text may be hidden at certain breakpoints by DocSearch's own responsive styles.

• There is an indentation inconsistency in the first rule: the @apply rounded-lg !important; line is indented with one space while the surrounding declarations use two spaces. This is a minor formatting point but keeping custom.css consistent avoids noisy diffs in future edits.

• Please confirm the fix has been tested in both light and dark theme modes, as the box-shadow on focus/hover (var(--ifm-color-primary)) may behave differently across themes.

After screenshots and a quick mobile + dark-mode check are the key items here before this is ready to merge.