fix(editor): Fix NDV resize handle and scrollbar overlapping (#12509)

Author: alexgrozav

Diff for: packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, useCssModule } from 'vue';
 
 import { directionsCursorMaps, type Direction, type ResizeData } from 'n8n-design-system/types';
 
@@ -32,6 +32,7 @@ interface ResizeProps {
 	scale?: number;
 	gridSize?: number;
 	supportedDirections?: Direction[];
+	outset?: boolean;
 }
 
 const props = withDefaults(defineProps<ResizeProps>(), {
@@ -42,9 +43,12 @@ const props = withDefaults(defineProps<ResizeProps>(), {
 	minWidth: 0,
 	scale: 1,
 	gridSize: 20,
+	outset: false,
 	supportedDirections: () => [],
 });
 
+const $style = useCssModule();
+
 const emit = defineEmits<{
 	resizestart: [];
 	resize: [value: ResizeData];
@@ -70,6 +74,11 @@ const state = {
 	y: ref(0),
 };
 
+const classes = computed(() => ({
+	[$style.resize]: true,
+	[$style.outset]: props.outset,
+}));
+
 const mouseMove = (event: MouseEvent) => {
 	event.preventDefault();
 	event.stopPropagation();
@@ -147,7 +156,7 @@ const resizerMove = (event: MouseEvent) => {
 </script>
 
 <template>
-	<div :class="$style.resize">
+	<div :class="classes">
 		<div
 			v-for="direction in enabledDirections"
 			:key="direction"
@@ -161,6 +170,10 @@ const resizerMove = (event: MouseEvent) => {
 
 <style lang="scss" module>
 .resize {
+	--resizer--size: 12px;
+	--resizer--side-offset: -2px;
+	--resizer--corner-offset: -3px;
+
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -173,66 +186,71 @@ const resizerMove = (event: MouseEvent) => {
 }
 
 .right {
-	width: 12px;
+	width: var(--resizer--size);
 	height: 100%;
-	top: -2px;
-	right: -2px;
+	top: var(--resizer--side-offset);
+	right: var(--resizer--side-offset);
 	cursor: ew-resize;
 }
 
 .top {
 	width: 100%;
-	height: 12px;
-	top: -2px;
-	left: -2px;
+	height: var(--resizer--size);
+	top: var(--resizer--side-offset);
+	left: var(--resizer--side-offset);
 	cursor: ns-resize;
 }
 
 .bottom {
 	width: 100%;
-	height: 12px;
-	bottom: -2px;
-	left: -2px;
+	height: var(--resizer--size);
+	bottom: var(--resizer--side-offset);
+	left: var(--resizer--side-offset);
 	cursor: ns-resize;
 }
 
 .left {
-	width: 12px;
+	width: var(--resizer--size);
 	height: 100%;
-	top: -2px;
-	left: -2px;
+	top: var(--resizer--side-offset);
+	left: var(--resizer--side-offset);
 	cursor: ew-resize;
 }
 
 .topLeft {
-	width: 12px;
-	height: 12px;
-	top: -3px;
-	left: -3px;
+	width: var(--resizer--size);
+	height: var(--resizer--size);
+	top: var(--resizer--corner-offset);
+	left: var(--resizer--corner-offset);
 	cursor: nw-resize;
 }
 
 .topRight {
-	width: 12px;
-	height: 12px;
-	top: -3px;
-	right: -3px;
+	width: var(--resizer--size);
+	height: var(--resizer--size);
+	top: var(--resizer--corner-offset);
+	right: var(--resizer--corner-offset);
 	cursor: ne-resize;
 }
 
 .bottomLeft {
-	width: 12px;
-	height: 12px;
-	bottom: -3px;
-	left: -3px;
+	width: var(--resizer--size);
+	height: var(--resizer--size);
+	bottom: var(--resizer--corner-offset);
+	left: var(--resizer--corner-offset);
 	cursor: sw-resize;
 }
 
 .bottomRight {
-	width: 12px;
-	height: 12px;
-	bottom: -3px;
-	right: -3px;
+	width: var(--resizer--size);
+	height: var(--resizer--size);
+	bottom: var(--resizer--corner-offset);
+	right: var(--resizer--corner-offset);
 	cursor: se-resize;
 }
+
+.outset {
+	--resizer--side-offset: calc(-1 * var(--resizer--size) + 2px);
+	--resizer--corner-offset: calc(-1 * var(--resizer--size) + 3px);
+}
 </style>

Diff for: packages/editor-ui/src/components/NDVDraggablePanels.vue

@@ -375,6 +375,7 @@ function onDragEnd() {
 				:min-width="MIN_PANEL_WIDTH"
 				:grid-size="20"
 				:supported-directions="supportedResizeDirections"
+				outset
 				@resize="onResizeThrottle"
 				@resizeend="onResizeEnd"
 			>