Mini Cart buttons cut off in specific vertical phone viewports

[seanconklin]

Vertical mobile screen partially cuts off the "Go to checkout" button with my iPhone 11 Pro Max and totally cuts off the button in the attached video from a customer using Chrome with vertical screen.

I'm able to reproduce the problem using Chrome Dev Tools but with intermittent results as I click around, refresh, etc.

It appears a contributing factor is the browser's floating navigation bar, which DNE in the Chrome Dev Tools yet the problem sometimes reproduces there as well per the attached SS's.

SS: iPhone Pro Max vertical (reliably reproduces)

SS: Chrome Dev Tools iPhone XR (intermittently reproduces)

SS: Chrome Dev Tools iPad Air (intermittently reproduces)

Video MP4 (from a customer in Chrome mobile specs unknown)
https://user-images.githubusercontent.com/19829621/195697172-c02af392-3f1d-433e-88a0-cd8230ba5f8d.mp4

[seanconklin]

Alternate video format MOV
https://user-images.githubusercontent.com/19829621/195697504-de3647e0-8035-479b-9ba5-f2232af3849a.mov

[Tropicalista]

I suppose this is depending on the use of table instead of flex or grid.

I have similar issue generating by left in stock badge.

In my case I solved modifying white-space property property of css.

[Brianmitchtay]

Seeing this same issue reported by a user in 5760222-zen. I am able to replicate the same on my testing site.

[danielwrobert]

I've been able to reproduce this on several themes as well (screenshots below). The issue resurfaced today and I've moved it to a high priority item to investigate.

See: p1675100975816569-slack-C02FL3X7KR6 for additional context.