Openfoodnetwork: [mobile ux] Correct alignment on "ready for" field on Ipad

[RachL]

Description

On an iPad, the ready for field does not show up vertically centered.

A 1em/16px padding you be introduce above the dropdown.

Steps to Reproduce

1. Go visit an open shop with an Ipad

Animated Gif/Screenshot

Landscape

Portrait

Workaround

None

Severity

bug-s4: it's annoying, but you can use it

Your Environment

• Version used: v3.2.10
• Browser name and version: Firefox, Chrome & Safari
• Operating System and version (desktop or mobile): Tablet

[RachL]

@luisramos0 @Matt-Yorkley I was supposed to open this issue out of https://github.com/openfoodfoundation/openfoodnetwork/issues/4572#issuecomment-704183647 but playing with it on staging FR where the latest release is- I can't find a way to reproduce it. Was this fix like in the ages that took me to create this issue? :D

[RachL]

@luisramos0 @Matt-Yorkley forget my comment I now see that this is an iPad- specific issue !

[luisramos0]

yes, browser stack required :+1:

[luisramos0]

actually it's just ipad mini.
I dont see it on "ipad mini 2019" in browser stack, but this was replicated in an ipad mini 3 and an ipad mini 4.

[RachL]

I also managed to reproduce on Ipad 7 and the latest Ipad Pro.

[Erioldoesdesign]

Is this likely because ipad mini's media query breakpoints are unusual?

[jibees]

Hi,
I'm trying to reproduce this issue, but I can't do it.
Unfortunately, I do not have any (functional) iPad device at home, so my question is:
_does this issue needs a real iPad device or you reproduced it from google chrome inspector or browserstack ?_

(btw, @filipefurtad0 did some test on iPhone device around this component : https://github.com/openfoodfoundation/openfoodnetwork/pull/6611#issuecomment-756409742)

[RachL]

@jibees I'm sending you the browserstack credential per Slack. We have a password manager but unfortunately we have reached our max number of persons on it, something we need to fix.