PR #34947: fix(web): anchor legacy Modal overlay to viewport regardless of ancestor context

• Repository: langgenius/dify
• Author: HamzaSwitch
• State: closed | merged: False
• Link: https://github.com/langgenius/dify/pull/34947

Description (problem / solution / changelog)

Fixes #34803.

Clicking "+ Configure → Add API Key" on a data source in Settings collapses the modal into a narrow strip in the left gutter instead of opening centered.

base/modal/modal.tsx is built on PortalToFollowElem (a floating-ui dropdown primitive) without a trigger. With no reference element, floating-ui's computed position: absolute + transform: translate(...) inline styles usually happen to cover the viewport anyway, but the Settings page is wrapped in MenuDialog, a base-ui Dialog whose Popup has -translate-x-1/2 -translate-y-1/2, and that ancestor transform throws the positioning chain off.

One-line fix: pass style={{ position: 'fixed', inset: 0, transform: 'none' }} to PortalToFollowElemContent. The style prop is spread after floatingStyles inside that component so the override wins, and fixed + inset: 0 is what the modal backdrop should have been doing all along. Left a comment on the line so the hack doesn't get cleaned up later.

The real fix is migrating this component to base/ui/dialog (tracked in #32767), but that's a bigger job and this helps all 8 Modal consumers at once without needing to unwind anything later.

11 modal tests + 156 plugin-auth authorize tests pass, lint and types clean. I don't have a self-hosted Dify with Firecrawl installed to reproduce the exact screenshot in the issue, so if someone's already in a repro env I'd appreciate a quick eyeball check.

Changed files

• web/app/components/base/modal/modal.tsx (modified, +11/-0)