Customize widgets: Link Popover not visible in full (Entire toolbar not visible)

[arunsathiya]

Description

On a theme with block widgets, the toolbar on the widgets area of the Customizer is not visible in full. It gets cut in the middle, with half appearing outside of the display area.

Step-by-step reproduction instructions

• Start with a theme that has block widgets, like Twenty Twenty-One or Espied.
• Open the site's Customizer and click on the widgets area.
• Add a list block, or any block.
• Choose the text on the block and add a link.
• Notice that the toolbar that pops up to add the link does not appear in full.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.0
• Gutenberg 13.4.0
• Firefox 101.0.1 on Mac 12.4

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

[arunsathiya]

I did my best to locate an existing issue with keywords like block widget toolbar and missing but can't spot one so far. Happy to be pointed at a report, if one exists already.

[Thelmachido]

Closing this issue in favor of this one since that is already being looked at there.

[arunsathiya]

@Thelmachido From our testing, it looks like a core bug though, which is why I created this issue. Could we reopen this issue?

[annezazu]

Re-opening as I can replicate with GB 13.5 RC 1, WP 6.0, and TT1:

While it can be investigated in a separate repo for third party work, it's definitely important to track down the root cause in Gutenberg here, since something seems amiss!

[talldan]

Is it the Link popover that's cut off? The issue title says toolbar, but it's ok in the screenshots.

edit: Seems so, I've updated the title.

[talldan]

This issue also happens in other editors. I've worked on a fix for that - #42389.

I expected this to also resolve the issue in the customizer, but it seems now the Link Popover ends up off the other side of the sidebar 😱

I think it should overflow the sidebar like the block toolbar does.

[andreszs]

These grotesque GUI flaws could be expected from a Microsoft-owned website, it's really sad to see them in Wordpress too. There's an alarming lack of testing of new features nowadays, who's rushing the WP team to add more and more features without proper testing?

[JoryHogeveen]

As mentioned in #43678 the following commit is the cause: 8b14921#diff-7895f8092f907d624abdbe647e2201f1cebe9198cd3fae6ba759b70a4c0bfef4

I believe this is because the is-expanded class is never added thus the popover stays in position: absolute by default instead of switching to position: fixed

[ciampo]

This issue should have been fixed with the recent work on addressing popover regressions (#42770).

Feel free to re-open in case the issue can still be replicated on latest trunk. Thank you!

[ciampo]

This issue also happens in other editors. I've worked on a fix for that - #42389.

I expected this to also resolve the issue in the customizer, but it seems now the Link Popover ends up off the other side of the sidebar 😱

I think it should overflow the sidebar like the block toolbar does.

I actually missed this comment — it looks like the issue that still needs to be fixed is that the link toolbar is cut off by the toolbar's edges. I'll look into it and report back