fix(ui): keep row action menu anchored and stop scroll snap on /app/manage - #10419
Merged
Conversation
…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]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
ActionMenu→Popovercomponent. Two compounding defects:el.focus()withoutpreventScroll, so the browser scrolled the focused element into view, yanking the page to the top.position: fixedpopover was rendered inline inside the table row. The editorial UI overhaul added hovertransforms to rows/cards, and a transformed ancestor re-anchorsposition: fixedto itself instead of the viewport, so the menu (positioned from the trigger's viewport rect) landed in the wrong spot.Fix
Popovertodocument.body(createPortal) soposition: fixedalways resolves against the viewport, regardless of ancestor transforms.useLayoutEffectfor positioning so it's placed before paint (no{0,0}flash).preventScroll: trueon both focus calls (menu auto-focus + return-focus to trigger).Testing
New e2e regression test
manage-action-menu-position.spec.js: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]