fixes #95888

src/vs/workbench/browser/parts/views/viewPaneContainer.ts

@@ -606,6 +606,8 @@ const enum DropDirection {
 	RIGHT
 }
 
+type BoundingRect = { top: number, left: number, bottom: number, right: number };
+
 class ViewPaneDropOverlay extends Themable {
 
 	private static readonly OVERLAY_ID = 'monaco-workbench-pane-drop-overlay';
@@ -627,6 +629,7 @@ class ViewPaneDropOverlay extends Themable {
 	constructor(
 		private paneElement: HTMLElement,
 		private orientation: Orientation | undefined,
+		private bounds: BoundingRect | undefined,
 		protected location: ViewContainerLocation,
 		protected themeService: IThemeService,
 	) {
@@ -758,7 +761,22 @@ class ViewPaneDropOverlay extends Themable {
 				this.doPositionOverlay({ top: '0', right: '0', width: '50%', height: '100%' });
 				break;
 			default:
-				this.doPositionOverlay({ top: '0', left: '0', width: '100%', height: '100%' });
+				// const top = this.bounds?.top || 0;
+				// const left = this.bounds?.bottom || 0;
+
+				let top = '0';
+				let left = '0';
+				let width = '100%';
+				let height = '100%';
+				if (this.bounds) {
+					const boundingRect = this.container.getBoundingClientRect();
+					top = `${this.bounds.top - boundingRect.top}px`;
+					left = `${this.bounds.left - boundingRect.left}px`;
+					height = `${this.bounds.bottom - this.bounds.top}px`;
+					width = `${this.bounds.right - this.bounds.left}px`;
+				}
+
+				this.doPositionOverlay({ top, left, width, height });
 		}
 
 		if ((this.orientation === Orientation.VERTICAL && paneHeight <= 25) ||
@@ -899,9 +917,35 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 		this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, (e: MouseEvent) => this.showContextMenu(new StandardMouseEvent(e))));
 
 		let overlay: ViewPaneDropOverlay | undefined;
+		const getOverlayBounds: () => BoundingRect = () => {
+			const fullSize = parent.getBoundingClientRect();
+			const lastPane = this.panes[this.panes.length - 1].element.getBoundingClientRect();
+			const top = this.orientation === Orientation.VERTICAL ? lastPane.bottom : fullSize.top;
+			const left = this.orientation === Orientation.HORIZONTAL ? lastPane.right : fullSize.left;
+
+			return {
+				top,
+				bottom: fullSize.bottom,
+				left,
+				right: fullSize.right,
+			};
+		};
+
+		const inBounds = (bounds: BoundingRect, pos: { x: number, y: number }) => {
+			return pos.x >= bounds.left && pos.x <= bounds.right && pos.y >= bounds.top && pos.y <= bounds.bottom;
+		};
+
+
+		let bounds: BoundingRect;
+
 		this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(parent, {
 			onDragEnter: (e) => {
-				if (!overlay && this.panes.length === 0) {
+				bounds = getOverlayBounds();
+				if (overlay && overlay.disposed) {
+					overlay = undefined;
+				}
+
+				if (!overlay && inBounds(bounds, e.eventData)) {
 					const dropData = e.dragAndDropData.getData();
 					if (dropData.type === 'view') {
 
@@ -912,7 +956,7 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 							return;
 						}
 
-						overlay = new ViewPaneDropOverlay(parent, undefined, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
+						overlay = new ViewPaneDropOverlay(parent, undefined, bounds, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
 					}
 
 					if (dropData.type === 'composite' && dropData.id !== this.viewContainer.id) {
@@ -920,14 +964,22 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 						const viewsToMove = this.viewDescriptorService.getViewContainerModel(container).allViewDescriptors;
 
 						if (!viewsToMove.some(v => !v.canMoveView) && viewsToMove.length > 0) {
-							overlay = new ViewPaneDropOverlay(parent, undefined, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
+							overlay = new ViewPaneDropOverlay(parent, undefined, bounds, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
 						}
 					}
-
 				}
 			},
 			onDragOver: (e) => {
-				if (this.panes.length === 0) {
+				if (overlay && overlay.disposed) {
+					overlay = undefined;
+				}
+
+				if (overlay && !inBounds(bounds, e.eventData)) {
+					overlay.dispose();
+					overlay = undefined;
+				}
+
+				if (inBounds(bounds, e.eventData)) {
 					toggleDropEffect(e.eventData.dataTransfer, 'move', overlay !== undefined);
 				}
 			},
@@ -954,9 +1006,20 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 						}
 					}
 
+					const paneCount = this.panes.length;
+
 					if (viewsToMove.length > 0) {
 						this.viewDescriptorService.moveViewsToContainer(viewsToMove, this.viewContainer);
 					}
+
+					if (paneCount > 0) {
+						for (const view of viewsToMove) {
+							const paneToMove = this.panes.find(p => p.id === view.id);
+							if (paneToMove) {
+								this.movePane(paneToMove, this.panes[this.panes.length - 1]);
+							}
+						}
+					}
 				}
 
 				overlay?.dispose();
@@ -1366,7 +1429,7 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 							return;
 						}
 
-						overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
+						overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, undefined, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
 					}
 
 					if (dropData.type === 'composite' && dropData.id !== this.viewContainer.id && !this.viewContainer.rejectAddedViews) {
@@ -1374,7 +1437,7 @@ export class ViewPaneContainer extends Component implements IViewPaneContainer {
 						const viewsToMove = this.viewDescriptorService.getViewContainerModel(container).allViewDescriptors;
 
 						if (!viewsToMove.some(v => !v.canMoveView) && viewsToMove.length > 0) {
-							overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
+							overlay = new ViewPaneDropOverlay(pane.dropTargetElement, this.orientation ?? Orientation.VERTICAL, undefined, this.viewDescriptorService.getViewContainerLocation(this.viewContainer)!, this.themeService);
 						}
 					}
 				}