Make the search bar on the start page fully wide on small screens #94

Merged
jakob.scheid merged 8 commits from feature/fully-wide-search-bar-on-startpage-on-small-screens into main 2026-06-01 15:00:41 +02:00
Owner

Make the search bar on the start page fully wide on small screens

Lets the search bar on the start page grow on the whole width if the screen is not wider than 48em

Summary

  • Magnifying glass icon instead of text on the search submit button to improve the UX and avoid wasting space, especially on small screens
  • Increase the width of the search bar to the whole width on small screens
  • Update Vite configuration, so that also older browsers (all since ES2020) are supported (if this would not have been changed, Vite would compress CSS Media Queries to a shorter format which, however, is not supported by older browsers like Safari on iOS 15.8.8)

Related issues

Closes: #63

# Make the search bar on the start page fully wide on small screens Lets the search bar on the start page grow on the whole width if the screen is not wider than `48em` ## Summary - Magnifying glass icon instead of text on the search submit button to improve the UX and avoid wasting space, especially on small screens - Increase the width of the search bar to the whole width on small screens - Update Vite configuration, so that also older browsers (all since ES2020) are supported (if this would not have been changed, Vite would compress CSS Media Queries to a shorter format which, however, is not supported by older browsers like Safari on iOS 15.8.8) ## Related issues Closes: #63
jakob.scheid added this to the responsive-design-ready milestone 2026-06-01 14:30:08 +02:00
jakob.scheid added the
type
feature
prio
critical
area
startpage
labels 2026-06-01 14:30:08 +02:00
jakob.scheid added this to the MVP Frontend project 2026-06-01 14:30:08 +02:00
jakob.scheid added 6 commits 2026-06-01 14:30:08 +02:00
jakob.scheid moved this to Review in MVP Frontend on 2026-06-01 14:30:45 +02:00
jakob.scheid marked the pull request as work in progress 2026-06-01 14:31:46 +02:00
jakob.scheid added 2 commits 2026-06-01 14:34:24 +02:00
jakob.scheid marked the pull request as ready for review 2026-06-01 14:34:27 +02:00
johannes.vos approved these changes 2026-06-01 14:47:19 +02:00
johannes.vos left a comment
Member

Is good! But please do different things like the search button icon in different branches next time.

Is good! But please do different things like the search button icon in different branches next time.
Author
Owner

Is good! But please do different things like the search button icon in different branches next time.

I did that intentionally because the icon instead of the text is important for search bar width and is therefore thematically related. If these two things would be developed separately and independently, the actual search bar width (where the input field is) would be only about the half of the screen on average cell phones.

> Is good! But please do different things like the search button icon in different branches next time. I did that intentionally because the icon instead of the text is important for search bar width and is therefore thematically related. If these two things would be developed separately and independently, the actual search bar width (where the input field is) would be only about the half of the screen on average cell phones.
jakob.scheid merged commit f7a76d5d20 into main 2026-06-01 15:00:41 +02:00
jakob.scheid deleted branch feature/fully-wide-search-bar-on-startpage-on-small-screens 2026-06-01 15:00:41 +02:00
jakob.scheid moved this to Done in MVP Frontend on 2026-06-01 15:06:56 +02:00
Sign in to join this conversation.