fix(ui): wrap DialogBox in Teleport to fix positioning in drawer cont…

[dimitrieh]

Description

Dialogs spawned from buttons within the immersive editor drawer were not centering on screen due to CSS positioning context issues. The drawer uses position: fixed with transform properties, which creates a new containing block for fixed-position descendants.

This change wraps the DialogBox component in Vue 3's Teleport component to render dialogs at the document body level, outside the drawer's DOM hierarchy. This ensures dialogs always position relative to the viewport regardless of where they are instantiated.

Related Issue(s)

Follow up from https://github.com/FlowFuse/flowfuse/pull/6253

https://github.com/FlowFuse/flowfuse/issues/6261

Checklist

• [x] I have read the contribution guidelines
• [ ] Suitable unit/system level tests have been added and they pass
• [ ] Documentation has been updated
  • [ ] Upgrade instructions
  • [ ] Configuration details
  • [ ] Concepts
• [ ] Changes flowforge.yml?
  • [ ] Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • [ ] Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• [ ] Link to Changelog Entry PR, or note why one is not needed.

Labels

• [ ] Includes a DB migration? -> add the area:migration label

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 76.22%. Comparing base (04d9032) to head (c8c05fb). :warning: Report is 12 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6255   +/-   ##
=======================================
  Coverage   76.22%   76.22%           
=======================================
  Files         393      393           
  Lines       19788    19788           
  Branches     4743     4743           
=======================================
  Hits        15084    15084           
  Misses       4704     4704           

Flag	Coverage Δ
backend	76.22% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dimitrieh]

@cstns this should fix https://github.com/FlowFuse/flowfuse/issues/6261 right?

[cstns]

@cstns this should fix #6261 right?

yes

[dimitrieh]

@cstns can you give this a ✅ so we can merge? This is still a problem:

[cstns]

It has a green light from the get go, but there are a lot of e2e tests that need to be addressed, that's why I haven't ticked it yet