Header size in tablet

[fcoveram]

Description

On tablet, md and lg breakpoints, the header breaks when opening the content switcher by changing its height and moving buttons to a second row.

Expectation

The header should not change its size but adapt its width to the viewport.

Screenshots

Header.ipad.11.pro.landscape.mp4

Header.ipad.11.pro.portrait.mp4

[zackkrida]

I'm not able to reproduce this on the production site in Chrome, Firefox, or Safari on my Mac. I can get you specific version numbers on those, but where are you seeing this issue?

[fcoveram]

On Firefox and Safari, in an iPad Pro 11-inch. Sorry for not adding the device and browser details.

[sarayourfriend]

@panchovm can you share what version if iPadOS your device is running? You can find it by following these steps: https://support.apple.com/en-us/HT201685

[fcoveram]

I update the OS yesterday but today I am still seeing the bug. I have iOS 15.3

I think it has to do with the WordPress header. In the video below, I was trying to change content, see filters, and type a new search. None of them worked.

Openverse.ipad.pro.11.portrait.-.header.bug.mp4

[sarayourfriend]

Sounds good. I have an iPad I can test this with back home. I'll look into this later today unless someone else gets to it before me.

[zackkrida]

@panchovm or @sarayourfriend could you check the main branch for this again on an iPad? it might have been fixed in a recent PR.

[obulat]

There is a new regression on the main branch due to addition of the VLogoButton. Originally, the search bar width in a single-row header was calculated based on the widths of other components, and the logo was assumed to be 40px wide. Now it takes up 48px, so the search bar doesn't fit, and the last button goes to the second row.

[fcoveram]

I do not know how to set up my iPad for running dev, I tried mirroring it from my MacBook but did not work.

[sarayourfriend]

I ran it yesterday and didn't notice this particular issue. But there are indeed other problems with mobile browsing and the header that we need to fix (I'm working on it last night and today).

[zackkrida]

@panchovm https://search-staging.openverse.engineering could be good to test on your iPad!

[fcoveram]

This is what I see on Firefox and Safari (iOS 15.3)

iPad.landscape.9-feb.mp4

iPad.portrait.9-feb.mp4

[sarayourfriend]

Thanks @panchovm!

[sarayourfriend]

I think the fixes to the popover height/width in #850 might actually solve this. It's very similar behavior to what I was seeing in iOS with the license description button moving around with the popover.

[sarayourfriend]

Closed by #850