[BUGFIX] fix panel links menu positioning

[ayanarukasar]

Description

Fixes panel link dropdown menus appearing at arbitrary screen positions instead of next to the link icon.

The menu was portaled to document.body, which breaks positioning inside react-grid-layout panels that use CSS transforms. This change disables the portal for panel link menus and anchors the menu below the link icon.

Fixes perses/perses#3654

Screenshots

After

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the naming convention.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky.

[jgbernalp]

@ayanarukasar can you please follow the PR template checks and include some screenshots or tests when relevant.

[ayanarukasar]

@jgbernalp Thanks for the review! I've updated the PR description to follow the template and added a screenshot showing the panel links menu opening next to the link icon.

[shahrokni]

Could be shortened no?

links?.length > 0

[ayanarukasar]

@shahrokni Good catch — updated all three occurrences to use links?.length > 0. Also rebased onto latest main. Thanks!

[shahrokni]

https://github.com/perses/shared/pull/157/changes#r3387731023

[jgbernalp]

@ayanarukasar Is the image depicting the previous behavior? It seems the dropdown is not next to the link button

[ayanarukasar]

@jgbernalp You're right — the previous screenshot didn't show the fix correctly.

disablePortal alone wasn't enough; react-grid-layout CSS transforms still broke MUI Menu positioning. I've updated the fix to use Popper with strategy: 'fixed' for panel links (same approach as OverflowMenu), and render separate LinksDisplay instances per header breakpoint.

Squashed into a single commit (8f808f2), rebased on latest main, and retested locally — the menu now opens directly below the link icon. Updated screenshot attached.

[jgbernalp]

I wonder if disabling portaling altogether would make the code simpler, as right now we are almost duplicating the same code with or without portal. Does this issue also applies for other context menus like actions or editing, for example when the menu is collapsed in a panel that has no name?

[ayanarukasar]

@jgbernalp Good questions!

On portaling: I tried disablePortal first, but MUI Menu positioning was still wrong inside react-grid-layout panels (CSS transforms). Popper with strategy: 'fixed' is what fixed it — same general approach as OverflowMenu in PanelActions. Dashboard-level links aren't inside transformed grid items, so the standard Menu still works there. We could unify both variants on the Popper pattern in a follow-up, but I kept this PR scoped to the reported bug.

On other menus: OverflowMenu already uses Popper rather than portaled Menu, so it's less likely to hit the same issue. Panel links also had a second cause — a shared linksAction element bound to a hidden responsive branch — which renderPanelLinks() fixes. I haven't seen the same mispositioning on overflow/edit menus locally, but happy to file a separate issue to audit other panel menus if useful.