fix: align explore search bar inline with brand and login#297
Merged
SimplicityGuy merged 1 commit intomainfrom Apr 12, 2026
Merged
fix: align explore search bar inline with brand and login#297SimplicityGuy merged 1 commit intomainfrom
SimplicityGuy merged 1 commit intomainfrom
Conversation
The Search/Ask NLQ toggle was nested inside `.navbar-search`, making the search column 72px tall while brand and login were 32px. With `align-items: center`, the input row floated to the top of its column and visually misaligned with brand/login, leaving the search bar offset vertically. Switch `.navbar-top` to a 3-column CSS grid (`auto 1fr auto`) with two rows. Move the toggle and Ask panel out of `.navbar-search` into a sibling `.navbar-search-extras` div that occupies row 2 of column 2. Brand, search input, and login are pinned to row 1 and stay vertically aligned regardless of how tall the optional NLQ extras row beneath the search input becomes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Contributor
E2E Coverage (webkit)
|
Contributor
E2E Coverage (firefox)
|
Contributor
E2E Coverage (chromium)
|
Contributor
E2E Coverage (webkit - iPhone 15)
|
Contributor
E2E Coverage (webkit - iPad Pro 11)
|
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
1 participant
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.
Summary
.navbar-search, making the search column 72px tall while brand and login were 32px. Withalign-items: center, the input row floated to the top of its column and visually misaligned with brand/login..navbar-topfrom flex to a 3-column CSS grid (auto 1fr auto) with two rows. Brand, search input, and login are pinned to row 1.#searchAskToggleand#nlqPanelout of.navbar-searchinto a sibling.navbar-search-extrasdiv that occupies row 2 of column 2, so the input row stays inline with brand and login regardless of NLQ state.Before
The search bar sat below the logo's center line because the toggle was expanding its container.
After
Brand, search input, and login button all share the same horizontal centerline. Search/Ask toggle (when NLQ is enabled) sits centered in row 2 below the search input, above the tab bar.
Test plan
just test-js)🤖 Generated with Claude Code