Feat(search): place search bar below navbar on the search results view on small screens #99

2026-06-01T17:56:51+02:00

jakob.scheid commented

2026-06-01 17:56:51 +02:00

Show search bar below the navbar on the search results view on small screens

Before, the search bar was displayed in the navbar when the search results view was active, regardless of the screen width. This caused the navbar to look very squished on small screens on the search results view.

This PR places the search bar below the navbar (on the search results view) on small screens.

Summary

Add search bar wrapper component for the navbar search bar
Put the wrapper component below and into the navbar and show the correct one (according to the screen size)
Set the search form width in the search bar component to 100 %

Related issues

Closes: #97

# Show search bar below the navbar on the search results view on small screens Before, the search bar was displayed in the navbar when the search results view was active, regardless of the screen width. This caused the navbar to look very squished on small screens on the search results view. This PR places the search bar below the navbar (on the search results view) on small screens. ## Summary - Add search bar wrapper component for the navbar search bar - Put the wrapper component below and into the navbar and show the correct one (according to the screen size) - Set the search form width in the search bar component to 100 % ## Related issues Closes: #97

jakob.scheid added this to the responsive-design-ready milestone 2026-06-01 17:56:51 +02:00

jakob.scheid added the Area/Search Results

Priority

Medium

3

Kind/Feature labels 2026-06-01 17:56:51 +02:00

jakob.scheid added this to the Project Board project 2026-06-01 17:56:51 +02:00

jakob.scheid added 11 commits 2026-06-01 17:56:51 +02:00

feat(place-search-bar-below-navbar): add empty navbar search bar wrapper component 4daf550568

feat(place-search-bar-below-navbar): integrate search bar in the navbar search bar wrapper component 0df77ef6ee

feat(place-search-bar-below-navbar): show search bar in the navbar search bar wrapper component only when the search results view is active 873bd74804

feat(place-search-bar-below-navbar): add search bar model to the navbar search bar wrapper component 9b175e3923

feat(place-search-bar-below-navbar): use navbar search bar wrapper component in the navbar cabebfb9fe

feat(place-search-bar-below-navbar): hide navbar search bar wrapper component on small screens 17570d400d

set search form width to 100% dd678fb393

feat(place-search-bar-below-navbar): show search bar wrapper component below the navbar on small screens 9ed8790649

feat(place-search-bar-below-navbar): add padding to the search bar wrapper below the navbar (on small screens) a824ee57df

feat(place-search-bar-below-navbar): set width of the search bar wrapper in the navbar (on large screens) 6a31373b7d

feat(place-search-bar-below-navbar): add horizontal padding to the search bar wrapper in the navbar (on large screens) 47744e7be6

jakob.scheid moved this to Review in Project Board on 2026-06-01 18:04:07 +02:00

johannes.vos requested changes 2026-06-01 18:15:53 +02:00

Dismissed

johannes.vos closed this pull request

2026-06-01 18:17:31 +02:00

johannes.vos reopened this pull request

2026-06-01 18:44:12 +02:00

johannes.vos approved these changes 2026-06-01 18:44:38 +02:00

jakob.scheid merged commit fea440edaa into main

2026-06-01 18:49:58 +02:00

jakob.scheid deleted branch feature/place-search-bar-below-navbar

2026-06-01 18:49:59 +02:00

jakob.scheid moved this to Done in Project Board on 2026-06-01 18:50:59 +02:00

jakob.scheid changed title from ~~Show search bar below the navbar on the search results view on small screens~~ to Feat: place search bar below navbar on the search results view on small screens

2026-07-20 12:16:33 +02:00

jakob.scheid changed title from ~~Feat: place search bar below navbar on the search results view on small screens~~ to Feat(search): place search bar below navbar on the search results view on small screens

2026-07-20 12:27:29 +02:00

jakob.scheid modified the milestone from responsive-design-ready to 0.1.0

2026-07-22 11:37:00 +02:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Seekra/frontend#99