fix: improve navbar search dropdown behavior#4891
Merged
Merged
Conversation
ashmod
changed the title
Contributor
|
/gemini review |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request provides a solid refactoring of the navbar search dropdown, improving its behavior and visual stability by mounting it inline. The JavaScript has been significantly cleaned up, fixing event listener leaks and improving code organization. The SCSS changes are also well-structured, using variables and better nesting. I have one minor suggestion regarding a potential visual regression in the search suggestions on the list page. Overall, this is a great improvement.
tymzd
pushed a commit
to tymzd/osv.dev
that referenced
this pull request
Apr 13, 2026
The previous navbar search had the dropdown appended as a detached element, making it visually fragile. For example, zooming in while the search dropdown is on would often break it because of it not being properly attached to the search field: <div align="center"> <img width="1907" height="158" alt="image" src="https://github.com/user-attachments/assets/c0cb86ec-8eff-4bbd-856d-2d4a8aabe6c1" /> </div> Additionally, the styles applied on dropdown made it feel somewhat disconnected (e.g. radius would change on dropdown and the dropdown wouldn't feel seamless with the search field), this stood out particularly in light mode. This PR refactors the dropdown to mount inline as a child of the search form, to flow naturally below the input. Before/After: https://github.com/user-attachments/assets/239896b2-0c20-4cd3-9a35-61148d3f18e7 This PR also fixes a few related issues: event listeners that were never cleaned up, the search bar open animation very briefly flashing the submit arrow (see Before at 0.25x) and applied some cleanup to the search module.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The previous navbar search had the dropdown appended as a detached element, making it visually fragile.
For example, zooming in while the search dropdown is on would often break it because of it not being properly attached to the search field:
Additionally, the styles applied on dropdown made it feel somewhat disconnected (e.g. radius would change on dropdown and the dropdown wouldn't feel seamless with the search field), this stood out particularly in light mode.
This PR refactors the dropdown to mount inline as a child of the search form, to flow naturally below the input.
Before/After:
dropdown_before-after.mp4
This PR also fixes a few related issues: event listeners that were never cleaned up, the search bar open animation very briefly flashing the submit arrow (see Before at 0.25x) and applied some cleanup to the search module.