fix(desktop): prevent webview from swallowing mosaic drag events

[kirankunigiri]

Summary

Dragging top level tabs into an active browser tab is currently broken. This fixes it.

Broken Demo (before)

Fixed Demo (after)

• Fixes drag-and-drop not working when dropping panes onto browser tabs
• Electron <webview> tags create separate compositor layers that capture drag events before they reach react-mosaic drop targets
• Sets pointer-events: none directly on the <webview> element during any HTML5 drag operation so the compositor stops routing events to the guest process

How it works

Native dragstart/dragend/drop event listeners (capture phase) toggle pointer-events on all registered webview elements. This is done at the module level in usePersistentWebview so it covers all drag sources (tab bar drags, mosaic pane drags, etc.).

The webview remains fully visible during drag — only event routing is disabled.

Test plan

• Open a browser pane in one tab, terminal in another
• Drag the terminal tab down onto the browser tab — split should work
• Drag browser tab onto terminal tab — split should work
• Verify normal browser interaction (clicking, scrolling, typing) still works after drag completes

---

Summary by cubic

Fixes pane/tab drag-and-drop onto browser tabs by stopping Electron webviews from capturing drag events so react-mosaic drop targets receive them.

• Bug Fixes
  • Toggle pointer-events: none on all <webview> elements during any HTML5 drag (dragstart, dragend, drop) to bypass the guest compositor.
  • Implemented at module scope in usePersistentWebview so it covers tab-bar and pane drags; interaction returns to normal after drag ends.

^{Written for commit b397f44. Summary will update on new commits.}

Summary by CodeRabbit

• Bug Fixes
  • Improved drag-and-drop behavior for webview elements, ensuring proper event handling during drag operations without interference.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added drag lifecycle handling to persistent webview elements by toggling their pointer-events style property between "none" during drag operations and "" on drag completion, preventing webviews from capturing drag events.

Changes

Cohort / File(s)	Summary
Persistent Webview Drag Handling apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/hooks/usePersistentWebview/usePersistentWebview.ts	Introduced setWebviewsDragPassthrough(passthrough) function to toggle style.pointerEvents on registered webviews during drag lifecycle events (dragstart, dragend, drop) in capture phase.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• fix(desktop): prevent webview from capturing drag events during pane rearrangement #1547: Addresses the same drag-and-drop blocking issue but by setting pointer-events on the container element rather than individual webview elements.

Poem

🐰✨ When dragging through the workspace wide,
Webviews must step back and hide,
Pointer-events set to "none,"
Until the drag-dance is done! 🎯

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: preventing webview elements from interfering with drag-and-drop operations in the mosaic layout system.
Description check	✅ Passed	The PR description provides clear context with bug explanation, implementation details, test plan, and demo videos, but lacks formal sections matching the template structure.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/hooks/usePersistentWebview/usePersistentWebview.ts (1)

47-49: Consider guarding against abnormal drag termination.

If the browser window loses focus during a drag (e.g., user Alt+Tabs away), or the drag is terminated abnormally, there's a small risk that webviews remain in pointer-events: none state. While dragend should fire in most cancellation scenarios (including Escape key), some edge cases in Electron/Chromium may not trigger it.

A defensive approach would be to also listen for blur on window to reset the state:

🔧 Optional: Add blur listener as additional safeguard

 window.addEventListener("dragstart", () => setWebviewsDragPassthrough(true), true);
 window.addEventListener("dragend", () => setWebviewsDragPassthrough(false), true);
 window.addEventListener("drop", () => setWebviewsDragPassthrough(false), true);
+window.addEventListener("blur", () => setWebviewsDragPassthrough(false));

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/hooks/usePersistentWebview/usePersistentWebview.ts`
around lines 47 - 49, The drag listeners in usePersistentWebview currently set
webviews to passthrough on dragstart and reset on dragend/drop but can leave
webviews stuck if the window loses focus; add a window 'blur' event listener
that calls setWebviewsDragPassthrough(false) as an additional safeguard,
register it alongside the existing "dragstart"/"dragend"/"drop" listeners, and
ensure you remove the 'blur' listener in the same cleanup/unsubscribe logic so
the handler is detached when the hook/component unmounts.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/hooks/usePersistentWebview/usePersistentWebview.ts`:
- Around line 47-49: The drag listeners in usePersistentWebview currently set
webviews to passthrough on dragstart and reset on dragend/drop but can leave
webviews stuck if the window loses focus; add a window 'blur' event listener
that calls setWebviewsDragPassthrough(false) as an additional safeguard,
register it alongside the existing "dragstart"/"dragend"/"drop" listeners, and
ensure you remove the 'blur' listener in the same cleanup/unsubscribe logic so
the handler is detached when the hook/component unmounts.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0862fada-0e02-4900-be36-c2fc1105525c

📥 Commits

Reviewing files that changed from the base of the PR and between 3cdb35f and b397f44.

📒 Files selected for processing (1)

• apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/hooks/usePersistentWebview/usePersistentWebview.ts

[cubic-dev-ai]

No issues found across 1 file