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

2026-06-01T14:30:08+02:00

jakob.scheid commented

2026-06-01 14:30:08 +02:00

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

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

feat(fully-wide-search-bar): Reduce main content horizontal padding on small screens a30703dc3e

add magnifying glass icon 83351110b3

replace 'search' text on the search submit button with a magnifying glass icon b0bf852e26

Center magnifying glass icon on the search submit button ba754771f4

support old browsers 720fbd5697

adapt the color of the magnifying glass search icon to the color scheme a2268ea275

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

add title to the search submit button c98e8d1f96

add ARIA label to the search submit button 34af4c874f

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

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

jakob.scheid commented

2026-06-01 15:00:21 +02:00

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.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Seekra/frontend#94