FocalPointPicker: Moving Focal Point to Right Causes Editor Sidebar Overflow

[SainathPoojary]

Description

When moving the focal point to the far right side in the FocalPointPicker component, the Editor sidebar overflows, causing a horizontal scrollbar to appear. This issue can be observed in components that utilize FocalPointPicker, such as Cover and Media & Text blocks.

Step-by-step reproduction instructions

1. Add a Cover or Media & Text block to a post or page.
2. Select an image and open the block settings in the sidebar.
3. Use the FocalPointPicker to move the focal point to the right edge.
4. Observe that the sidebar overflows, and a horizontal scrollbar becomes visible.

Screenshots, screen recording, code snippet

2025-01-28.14-42-57.mp4

Environment info

• WordPress: 6.8-alpha-59711
• PHP: 8.2.27
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.4-MariaDB-ubu2404 / Client: mysqlnd 8.2.27)
• Browser: Chrome 132.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.3
• MU Plugins: None activated
• Plugins: Gutenberg 20.1.0

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure