Header does not fit on phones

[dhruvkb]

Description

The end-side of the header is cut off on smaller widths such as phones.

Reproduction

1. Visit Openverse from a smaller width device.
2. See error.

Expectation

The Search bar could possibly shrink to accommodate the content.

Screenshots

Environment

• Device: iPhone Xr
• OS: iOS 15.3
• Browser: Safari
• Version: 15.3
• Other info: viewport width = 414px

Resolution

• 🙋 I would be interested in resolving this bug.

[obulat]

Is this new? Which version of the front-end is this?
Just for context, when I open the currently deployed site at wordpress.org/openverse in Firefox or Chrome on my Android phone, I don't have a problem with the header not fitting.

[zackkrida]

@obulat I believe it referrers to the header after scrolling on the search results (which only seems to change on ssr-rendered pages, interesting bug). I'm able to view this on android chrome + ff.

[dhruvkb]

The iPhone I used has just 414px of width so that might be one of the reasons for the header getting cropped. Android phones with high resolution screens might not have this problem.

[sarayourfriend]

Is this and #845 related?