Navigation: Reset button overlaps on the text when the text is long

[yogeshbhutkar]

Description

This issue can be observed in the Navigation block's Submenu & Overlay Background color setting. The text for this setting becomes overly large, causing the Reset button to overlap with it. This not only affects the UI's appearance but also hinders usability, making it challenging for users to interact with the controls.

This problem was previously discussed in PR #68454, where similar behavior was highlighted. Addressing this issue is crucial to ensure a polished and user-friendly experience in the editor.

Step-by-step reproduction instructions

1. Navigate to Navigation block.
2. Try providing a Submenu & Overlay Background color.
3. Notice the Submenu & Overlay Background setting's text under Color settings overlaps with the reset button.

Screenshots, screen recording, code snippet

If the display text becomes longer, then an ellipsis is added to the overflowed text:

Expected behavior:
The maximum available width by the label should also consider the width that might be taken by the reset button and display the ellipsis accordingly.

Environment info

• WordPress Version: 6.8-alpha-59361
• Gutenberg Version: Trunk (0c42f22)
• OS: macOS Sequoia

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