Skip to content

fix(ui): keep row action menu anchored and stop scroll snap on /app/manage - #10419

Merged
mudler merged 1 commit into
masterfrom
fix/manage-action-menu-scroll-snap
Jun 20, 2026
Merged

fix(ui): keep row action menu anchored and stop scroll snap on /app/manage#10419
mudler merged 1 commit into
masterfrom
fix/manage-action-menu-scroll-snap

Conversation

@localai-bot

Copy link
Copy Markdown
Collaborator

Problem

On the Manage dashboard (/app/manage), clicking the three-dots (kebab) action menu on a model row snapped the page scroll to the top of the window and rendered the menu detached from its trigger, making it impossible to operate.

Root cause

The kebab uses the shared ActionMenuPopover component. Two compounding defects:

  1. Scroll snap to top. The menu auto-focus called el.focus() without preventScroll, so the browser scrolled the focused element into view, yanking the page to the top.
  2. Menu mispositioned / unusable. The position: fixed popover was rendered inline inside the table row. The editorial UI overhaul added hover transforms to rows/cards, and a transformed ancestor re-anchors position: fixed to itself instead of the viewport, so the menu (positioned from the trigger's viewport rect) landed in the wrong spot.

Fix

  • Portal the Popover to document.body (createPortal) so position: fixed always resolves against the viewport, regardless of ancestor transforms.
  • useLayoutEffect for positioning so it's placed before paint (no {0,0} flash).
  • preventScroll: true on both focus calls (menu auto-focus + return-focus to trigger).

Testing

New e2e regression test manage-action-menu-position.spec.js:

  • Red on old code: scroll jumped from 564 → 0 when opening the menu.
  • Green with the fix: scroll stays put, the menu tracks its trigger, and the popover is portaled to body.

All existing ActionMenu/Popover specs still pass (manage-logs-link, nodes-per-node-backend-actions, backends-management, middleware-page, model-editor-back-nav, page-render-smoke — 36 tests).

Assisted-by: Claude:claude-opus-4-8 [Claude Code]

…anage

Opening a model row's kebab (ActionMenu) on the Manage dashboard snapped the
page scroll to the top and rendered the menu detached from its trigger, making
it impossible to operate.

Two compounding causes:

- The menu auto-focus called el.focus() without preventScroll, so the browser
  scrolled the focused element into view, yanking the page to the top.
- The position:fixed Popover was rendered inline inside the table row. The
  editorial UI overhaul added hover transforms to rows/cards, and a transformed
  ancestor re-anchors position:fixed to itself instead of the viewport, so the
  menu (positioned from the trigger's viewport rect) landed in the wrong place.

Fix: portal the Popover to document.body so position:fixed always resolves
against the viewport, position it before paint with useLayoutEffect (no {0,0}
flash), and pass preventScroll:true to both focus calls.

Adds an e2e regression test that reproduces the symptom (scroll jumped from 564
to 0 on the old code) and asserts the menu tracks its trigger.

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Assisted-by: Claude:claude-opus-4-8 [Claude Code]
@mudler
mudler merged commit 3e96d81 into master Jun 20, 2026
56 of 59 checks passed
@mudler
mudler deleted the fix/manage-action-menu-scroll-snap branch June 20, 2026 21:25
@localai-bot localai-bot added the bug Something isn't working label Jun 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants