Calendar Date/Time Picker stutters on mobile devices

[lizkaraffa]

Depending on the device and the month, when opening the calendar picker, the calendar stutters as the max-width on .components-popover__content is rapidly added and removed.

1. Login to admin and edit a post on a mobile device or simulator.
2. Click on the settings icon
3. Under "Status & visibility" click on the Publish link for calendar picker to pop open
4. If on an Android device you should see the stutter regardless of the selected month (calendar placement is also awkward)
5. If on an iPhone device, change the calendar month to September and observe the stutter
6. Note that calendar content within the wrapper is also off-centered when on a non-stuttering month.

Expected Behavior
The calendar picker wrapper should be centered horizontally on the screen and should not stutter. The calendar elements should also be centered within the calendar wrapper.

Here are screencasts of this issue
iPhone X simulator: https://www.loom.com/share/9fbc61c37c33491dbd89027227e14e65
Android: https://youtu.be/i_727BrPCCY

Versions

• WordPress version: 5.5.1
• I've confirmed this happens on both default and sites with the Gutenberg plugin
• Gutenberg 8.9.1

Smartphones

• Device: iPhone X Simulator, iPhone 11 Pro, Samsung Galaxy Note 10
• Browser: Safari, Chrome, and Samsung internet (likely this will occur on all browsers)

Observations about this issue

• .components-popover__content seems to have conflicting rules. With min-width: 260px and yet a dynamically changing inline style that is less than the min-width. One example I observed was max-width: 253px. The max-width should not be less than the min-width
• The inline style max-width appears to be handled with JS and seems to be at least partially based on the width of the calendar wrapper, which changes depending on month length.
• Increasing the min-width on .components-popover__content prevents the stuttering for September, but then the calendar placement is even worse on the screen.
• Increasing the negative margin-right on .components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content when the min-width is increased helps with placement, but is a bandaid fix.

[StevenDufresne]

I was able to reproduce using:

Google Pixel 4
OS: Android 11.0
Browser: Chrome

[tellthemachines]

Related to #24592.

[supernovia]

Confirmed the Date Picker Flicker on chrome. Here's a screencast with a view of the JS console & Inspect Element, if it's helpful:

https://cloudup.com/izqp-zVDGQ7

also this does not happen in landscape.