Unable to select colors on small screens

[jameskoster]

Description

On small screens, the color palette popover is hidden.

Step-by-step reproduction instructions

On a small screen:

1. Select a block that can have colors applied, like Paragraph
2. Open the Inspector (⇧⌘,)
3. In the Color panel, click one of the buttons
4. Observe that no color palette is revealed

Screenshots, screen recording, code snippet

color.mp4

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Can confirm, noticed this from my android phone yesterday (site running Gutenberg 13.5.0), thank you for opening the issue.

[annezazu]

@aaronrobertshaw in case you have any insights here.

[aaronrobertshaw]

Thanks for the ping on this one 👍

This appears to have been a side-effect from the recent changes switching Popovers to use the floatingUI library (#40740). After that the popovers weren't repositioned automatically if they fell outside the viewport.

I've knocked up a quick fix in #41929. That will get the color controls popover visible and usable again. We can refine the positioning further in a follow-up as there is some ongoing work around this sort of issue for Tooltips. Whatever we come up with there, might inform how best to refine the positioning here.

While testing this I discovered the same issue exists for the border controls. Given that control can be split into multiple representing each side it's a little more involved. As such I've split a fix for that into a separate PR that can be iterated on independently (#41930).

[annezazu]

Reopening this after receiving a report from @nomad-skateboarding-dev. Here's a video showing the current experience using WordPress 6.2:

color.palette.mov

[aaronrobertshaw]

Thanks for reopening the issue @annezazu 👍

Looks like this is a different, but similar, issue around popover positioning. I've re-tested as per the original issue replication steps and the previous fix holds.

I can also confirm the Global Styles palette edit color pickers are rendered outside the viewport. If we adopt as similar approach as the original issue fix, the popovers are visible again. The catch then is they will overlay the control that was clicked to trigger the popover.

I'm still working on how we might improve that. If no solution is forthcoming I'll try and land a quick fix to get the popovers at least visible.

[aaronrobertshaw]

Unfortunately, it turns out when the color picker popover overlays a custom color control on small viewports, you are unable to select and change the custom color's name. That probably blocks that quick fix for the moment.

I'll continue to explore solutions in the next couple of days.

Screen.Recording.2023-04-20.at.4.49.33.pm.mp4

[annezazu]

Thanks so much, Aaron, for diving in!

[nomad-skateboarding-dev]

Thank you @annezazu ! 🙏

Thank you @aaronrobertshaw ! 🙏 I appreciate your time and effort on this, and even your first thought at the quick fix solution would have been a huge improvement if it had worked out. 🙌

[aaronrobertshaw]

I have a draft PR (#49975) up that functionality fixes the palette popovers including moving them off the controls that trigger them. If the general approach is accepted, we should be able to land a fix fairly soon.