⚡Also taking into account height changes

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,7 +43,7 @@ const props = defineProps<Props>();
 
 const isDragging = ref<boolean>(false);
 const initialized = ref<boolean>(false);
-const containerWidth = ref<number>(uiStore.appGridWidth);
+const containerWidth = ref<number>(uiStore.appGridDimensions.width);
 
 const emit = defineEmits<{
 	init: [{ position: number }];
@@ -86,14 +86,15 @@ onBeforeUnmount(() => {
 });
 
 watch(
-	() => uiStore.appGridWidth,
-	(width) => {
+	() => uiStore.appGridDimensions,
+	async (dimensions) => {
 		const ndv = document.getElementById('ndv');
 		if (ndv) {
+			await nextTick();
 			const { width: ndvWidth } = ndv.getBoundingClientRect();
 			containerWidth.value = ndvWidth;
 		} else {
-			containerWidth.value = width;
+			containerWidth.value = dimensions.width;
 		}
 		const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
 		const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
@@ -107,7 +108,7 @@ watch(
 		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) {
+		if (dimensions.width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
 			setMainPanelWidth(minRelativeWidth);
 			setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
 		}

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,