The width of items in vertical, nested, always-shown nav menus is jumping on hover

Description

Take a navigation block set to vertical orientation and to always show submenus, which has more than 2 levels. When this nav block is displayed in a narrow container/window where a line break is forced within submenu links, on hover the width of menu items (and their parent/child submenus) is jumping between the default and a more expanded state.

The smallest menu I could reproduce this with was:

Page
    Page
        Page

Step-by-step reproduction instructions

1. Create a menu with at least 3 nested items like Page > Page > Page.
2. Insert this in a page, and set it to always show submenus with mobile overlay off, and have a vertical orientation (left justified).
3. View it in a narrow desktop window and hover the various links.

(Reproduced on a fresh instance of https://playground.wordpress.net/ )

Screenshots, screen recording, code snippet

Settings used:

WordPress Playground reproduction:

Unhovered:

First level hovered:

Second level hovered:

Third level hovered:

Environment info

Reproduced on a fresh instance of https://playground.wordpress.net/

My own site is WordPress 7.1 with a basic block theme, viewed on Firefox 156.0 on Windows 10.

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