Gutenberg: Calendar date/time picker shows 'offscreen' on smaller screens

[Ipstenu]

Issue Overview

The date/time picker shows 'above' the click link on smaller screens, 50% of the time, which makes it unusable as you can't navigate.

Steps to Reproduce (for bugs)

1. Make a small screen
2. Try to edit the post date

Expected Behavior

The box would always be below the link so a user can scroll

Current Behavior

Every OTHER click will have the box ABOVE the link:

[ZebulanStanphill]

As of Gutenberg 3.6.2, it looks like the date/time picker just gets a scrollbar when it is close to the top of the screen, so it looks like this issue is fixed.

However, I noticed another issue, which I have reported separately: #9130.

[florianbrinkmann]

I can confirm that. This is how it looks with Gutenberg 3.6.2 (WordPress 5.0-alpha-43570) in Firefox 63.0a1 (2018-08-29) on Windows 10:

And a GIF of how it behaves when the viewport shrinks and grows:

[aaronjorbin]

The calendar always renders on the screen when in desktop mode, though the experience isn't amazing for super low height screens that are still at desktop widths. I don't think this needs iteration for 5.0

[mtias]

I think this might also have been resolved with the new date picker?

[Ipstenu]

It's not GREAT for small screens, but I think it's as good as it;'s getting with javascript and screen sizes :/

[ZebulanStanphill]

@mtias I mentioned in a comment above that this has been fixed since at least 3.6.2.

[noisysocks]

On mobile, things look pretty good:

On very short desktop screens, it looks odd, but is totally functional because the popover can be scrolled: