fix: keep panel resize drag working over files iframes

[nehaprasad-dev]

summary

• Add a full-viewport drag shield in useResizablePanels while resizing so mousemove/mouseup stay on the parent document
• Mount the shield with useLayoutEffect so it is active before the next paint
• Add a regression test for shield mount/remove during drag

Issue Number

fix : #724

How to Test

• Open a conversation with the right panel open on Files.
• Preview an HTML or PDF file (iframe preview).
• Drag the vertical divider horizontally across the iframe.
• Confirm the split resizes smoothly and releases on mouse up.

Video/Screenshots

N/A

Type

[x] Bug fix

Notes

N/A

[vercel]

@nehaprasad-dev is attempting to deploy a commit to the openhands Team on Vercel.

A member of the Team first needs to authorize it.

[all-hands-bot]

🟢 Good taste - Clean, standard solution to the iframe event capture problem.

This implements the classic drag shield pattern: a full-viewport overlay that keeps mouse events on the parent document when dragging over iframes. Using useLayoutEffect ensures the shield is mounted before paint, preventing any missed events.

The implementation is focused and correct:

• Proper accessibility (aria-hidden)
• Clean setup/teardown
• Good test coverage

[RISK ASSESSMENT]

• [Overall PR] ⚠️ Risk Assessment: 🟢 LOW

UI-only change affecting panel resize interaction. Focused, single-responsibility implementation with good test coverage. No breaking changes or architectural concerns.

VERDICT:
✅ Worth merging - Solves a real UX issue with the standard, proven approach.

---

Was this automated review useful? React with 👍 or 👎 to this review to help us measure review quality.
Workflow run: https://github.com/OpenHands/agent-canvas/actions/runs/26265909609

[rbren]

Confirmed this is working!