fix(editor): Fix NDV panels size on narrow screens

packages/frontend/editor-ui/src/App.vue

@@ -61,7 +61,8 @@ const logHiringBanner = () => {
 const updateGridWidth = async () => {
 	await nextTick();
 	if (appGrid.value) {
-		uiStore.appGridWidth = appGrid.value.clientWidth;
+		const { width, height } = appGrid.value.getBoundingClientRect();
+		uiStore.appGridDimensions = { width, height };
 	}
 };
 

packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue

@@ -9,7 +9,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { ndvEventBus } from '@/event-bus';
 import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue';
 import type { MainPanelType, XYPosition } from '@/Interface';
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
 import { useThrottleFn } from '@vueuse/core';
 
@@ -43,6 +43,7 @@ const props = defineProps<Props>();
 
 const isDragging = ref<boolean>(false);
 const initialized = ref<boolean>(false);
+const containerWidth = ref<number>(uiStore.appGridDimensions.width);
 
 const emit = defineEmits<{
 	init: [{ position: number }];
@@ -84,28 +85,37 @@ onBeforeUnmount(() => {
 	ndvEventBus.off('setPositionByName', setPositionByName);
 });
 
-const containerWidth = computed(() => uiStore.appGridWidth);
-
-watch(containerWidth, (width) => {
-	const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
-	const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
+watch(
+	() => uiStore.appGridDimensions,
+	async (dimensions) => {
+		const ndv = document.getElementById('ndv');
+		if (ndv) {
+			await nextTick();
+			const { width: ndvWidth } = ndv.getBoundingClientRect();
+			containerWidth.value = ndvWidth;
+		} else {
+			containerWidth.value = dimensions.width;
+		}
+		const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
+		const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
 
-	// Prevent the panel resizing below MIN_PANEL_WIDTH whhile maintaing position
-	if (isBelowMinWidthMainPanel) {
-		setMainPanelWidth(minRelativeWidth);
-	}
+		// Prevent the panel resizing below MIN_PANEL_WIDTH while maintain position
+		if (isBelowMinWidthMainPanel) {
+			setMainPanelWidth(minRelativeWidth);
+		}
 
-	const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft;
-	const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
+		const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft;
+		const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
 
-	// When user is resizing from non-supported view(sub ~488px) we need to refit the panels
-	if (width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
-		setMainPanelWidth(minRelativeWidth);
-		setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
-	}
+		// When user is resizing from non-supported view(sub ~488px) we need to refit the panels
+		if (dimensions.width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
+			setMainPanelWidth(minRelativeWidth);
+			setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
+		}
 
-	setPositions(mainPanelDimensions.value.relativeLeft);
-});
+		setPositions(mainPanelDimensions.value.relativeLeft);
+	},
+);
 
 const currentNodePaneType = computed((): MainPanelType => {
 	if (!hasInputSlot.value) return 'inputless';

packages/frontend/editor-ui/src/components/NodeDetailsView.vue

@@ -706,6 +706,7 @@ onBeforeUnmount(() => {
 
 <template>
 	<el-dialog
+		id="ndv"
 		:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
 		:before-close="close"
 		:show-close="false"

packages/frontend/editor-ui/src/stores/assistant.store.ts

@@ -147,14 +147,20 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
 	function openChat() {
 		chatWindowOpen.value = true;
 		chatMessages.value = chatMessages.value.map((msg) => ({ ...msg, read: true }));
-		uiStore.appGridWidth = window.innerWidth - chatWidth.value;
+		uiStore.appGridDimensions = {
+			...uiStore.appGridDimensions,
+			width: window.innerWidth - chatWidth.value,
+		};
 	}
 
 	function closeChat() {
 		chatWindowOpen.value = false;
 		// Looks smoother if we wait for slide animation to finish before updating the grid width
 		setTimeout(() => {
-			uiStore.appGridWidth = window.innerWidth;
+			uiStore.appGridDimensions = {
+				...uiStore.appGridDimensions,
+				width: window.innerWidth,
+			};
 			// If session has ended, reset the chat
 			if (isSessionEnded.value) {
 				resetAssistantChat();

packages/frontend/editor-ui/src/stores/ui.store.ts

@@ -184,7 +184,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	const pendingNotificationsForViews = ref<{ [key in VIEWS]?: NotificationOptions[] }>({});
 	const processingExecutionResults = ref<boolean>(false);
 
-	const appGridWidth = ref<number>(0);
+	const appGridDimensions = ref<{ width: number; height: number }>({ width: 0, height: 0 });
 
 	// Last interacted with - Canvas v2 specific
 	const lastInteractedWithNodeConnection = ref<Connection | undefined>();
@@ -576,7 +576,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	};
 
 	return {
-		appGridWidth,
+		appGridDimensions,
 		appliedTheme,
 		contextBasedTranslationKeys,
 		getLastSelectedNode,