IBX-12399: Aligned multilevel popup menu buttons with the design system

[tischsoic]

🎫 Issue	IBX-12399

Description:

Aligns the multilevel popup menu (and the shared .ibexa-popup-menu surface) with the DS context menu buttons set:

• _popup-menu.scss restyled with DS tokens: white panel with $color-neutral-80 border, 8px radius, 4px/8px paddings, dense rows (14px/21px regular), drop shadow removed; adds the previously missing :focus-visible ring and a grey-text disabled state instead of opacity: 0.2.
• action_list.html.twig no longer injects ids-btn ids-btn--tertiary-alt ids-btn--medium into the overflow menu items — those classes fought the menu styling (centered labels, 40px rows). The ≤3-actions inline icon buttons keep them.
• Items with submenus now get ibexa-popup-menu__item--expanded while their branch is open (purple highlight per the design's Clicked state), and Popper offsets match the design (4px below the trigger, submenus item-aligned).

States absent from the Figma set (hover, focus, disabled, separators) follow the header user menu (IBX-12207) conventions.

The content-edit context menu popup now stays open and repositions (with its submenus) when the toolbar re-adapts on resize — previously an open submenu kept a stale position over its parent. It closes only when the toolbar fully expands and the popup has nothing left to show (previously an empty husk stayed on screen). Submenus also keep a small gap to the parent panel instead of touching it.

For QA:

Popup menus across the BO: content view "⋮" overflow, sub-items row actions, dashboard "…", notifications item menu, split-button dropdowns (e.g. the form-builder modal). Expect left-aligned dense rows on a white bordered panel without a shadow, a purple focus ring when tabbing through items, and a purple parent item while its submenu is open.

On the content edit page, resize the window while the "⋮" popup and a submenu are open: both should stay open, follow the toolbar, and keep the submenu beside its parent; widening until every toolbar button fits closes the (empty) popup.

Documentation:

[barbaragr]

1. It is impossible to go to the menu items with TAB key

Screen.Recording.2026-09-08.at.12.21.21.mov

2. Line should be removed, designs dont included it:

3. When menu is opened and window is being resized, the menu moves slightly and location differs from openedin the smaller window

Screen.Recording.2026-09-08.at.12.23.02.mov

4. I think the menu is too wide. To check with @adamplesibexa

Calrified by @adamplesibexa :

a. Align to the right (instead of the left, as it is now)
b. Width should fit the text
c. Minimum width should accommodate the full text (so it doesn’t get cut off just to make the button shorter)

[tischsoic]

1. It is impossible to go to the menu items with TAB key - we do not support this in our system right now
2. Line should be removed, designs dont included it: - design didn't took into account that we have groups, will be follow later if needeed
3. I think the menu is too wide - menu width will be address later - no design spec for now.

We will fix:

• When menu is opened and window is being resized, the menu moves slightly and location differs from openedin the smaller window
• a. Align to the right (instead of the left, as it is now)

Could you confirm @adamplesibexa ?

[tischsoic]

Fixed in 6a8ddc5 + 2798385:

• Align to the right — the split button popup was the only top branch still opening bottom-start; it now opens bottom-end like the context menu and action lists, so its right edge lines up with the button.
• Menu moves when the window is resized — repositioning after a toolbar adaptation now goes through a ibexa-multilevel-popup-menu:reposition event on body, so every open popup corrects itself, not only the "..." menu (Popper's own resize handler runs before the toolbar re-layouts). Verified on the content edit page after shrinking, widening and dragging the window with a menu + submenu open: both panels end up exactly where they are when opened fresh at that width.

Not in this iteration, as discussed: TAB navigation into menu items, the group divider line, and the menu width.

[tischsoic]

One more resize case fixed in 38da858: a split button's popup stayed open, detached from the toolbar, when the window shrank enough for that button to collapse into the "..." overflow.

Adaptive toolbar items are hidden with width/height: 0; overflow: hidden rather than display: none, so the popup itself cannot tell that its button is gone. The context menu knows which items it hid, so it now closes their popups (same rule the popup menu already applies to its own items with submenus).

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud