🐛 Bugfix: How to fix container edge drop zones conflicting with tab dr...

Date: 2026-03-08
Time: 17:33:57 UTC
Session: gspace1-192.4
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to fix container edge drop zones conflicting with tab drag-drop reordering?

Task: Fix drag-drop conflicts in dock-layout

🎯 Decision Made

Chosen:

Removed container edge zones from the drag overlay entirely. Moved 'New Row (Top/Bottom)' functionality to the right-click context menu and the ellipsis dropdown menu instead.

Options Considered:

1. Keep edge zones but reduce hit area size
2. Add z-index priority to tab bar over edge zones
3. Remove edge zones from drag, move to context menu only

💭 Reasoning

Root cause: The 'New Row (Top)' and 'New Row (Bottom)' zones were rendered inside @if(isDragging()), creating large hit areas at the top/bottom of the container that intercepted mouse events during EVERY drag operation. This caused: (1) tabs dragged near the top/bottom edge would trigger the new-row action instead of tab reorder, (2) compass drop zones competed with edge zones for mouse priority, (3) the visual 'New Row' indicator was distracting during simple tab reorders. The fix removes them from drag entirely — the same functionality is available via context menu Split Up/Down and New Row Top/Bottom actions, which is actually more intentional and less error-prone.

📁 Files Involved

• libs/libs-ui/dock-layout/src/lib/components/dock-container/dock-container.component.html
• libs/libs-ui/dock-layout/src/lib/components/dock-tabs/dock-tabs.component.ts
• libs/libs-ui/dock-layout/src/lib/services/dock-context-menu.service.ts

🔗 Related

• Decision ID: dev_1772991237250_rsg480c
• Session: 192
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation