Conversation
Group origin and destination in a dedicated route-field container and position the swap control on that group's midpoint so it no longer sits inside the destination input when origin has a value. Hide the button when fields stack on mobile. Co-authored-by: Lxr-max <Lxr-max@users.noreply.github.com>
5 tasks
Lxr-max
marked this pull request as ready for review
September 14, 2026 01:42
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
On the Google Flights homepage the swap button was absolutely positioned against the whole search row (origin + destination + dates). That put it in the middle of the destination field, and filling origin made the misalignment worse.
This groups origin and destination into a dedicated
.search-route-fieldscontainer and positions.search-swaprelative to that group so it stays on the seam. Date fields stay in a sibling.search-datesgroup. On mobile (stacked fields) the swap button remains hidden.Fixes #20.
Changes
.search-route-fields(sites/google_flights/templates/index.html)sites/google_flights/static/css/main.css).search-field { flex: 1 }outside the route group)sites/google_flights/tests/test_search_swap_layout.pyChecklist
left: 50%of.search-route-fields)max-width: 768pxVerification
Both passed. Chrome headless layout check of the homepage search widget with origin filled (
New York (JFK)):seamDelta: 190,insideDestination: trueseamDelta: 0swapDisplay: noneBefore (swap sits inside destination):
After, desktop (swap on the origin/destination seam, dates clear):
After, mobile (fields stacked, swap hidden):
The live Flask homepage was not exercised in Docker here because
sites/google_flights/instance_seed/is HF-managed and not present in this checkout. The screenshots use the committed homepage search markup plusstatic/css/main.css.