mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Milorad Filipovic 2025-03-05 14:58:45 +01:00
parent 8790a0df3d
commit 85ea9977b1
No known key found for this signature in database
2 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue
View file

@ -43,6 +43,7 @@ const props = defineProps<Props>();
const isDragging = ref<boolean>(false); const isDragging = ref<boolean>(false);
const initialized = ref<boolean>(false); const initialized = ref<boolean>(false);
const containerWidth = ref<number>(uiStore.appGridWidth);
const emit = defineEmits<{ const emit = defineEmits<{
init: [{ position: number }]; init: [{ position: number }];
@ -84,13 +85,20 @@ onBeforeUnmount(() => {
ndvEventBus.off('setPositionByName', setPositionByName); ndvEventBus.off('setPositionByName', setPositionByName);
}); });
const containerWidth = computed(() => uiStore.appGridWidth); watch(
() => uiStore.appGridWidth,
watch(containerWidth, (width) => { (width) => {
const ndv = document.getElementById('ndv');
if (ndv) {
const { width: ndvWidth } = ndv.getBoundingClientRect();
containerWidth.value = ndvWidth;
} else {
containerWidth.value = width;
}
const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH); const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth; const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
// Prevent the panel resizing below MIN_PANEL_WIDTH whhile maintaing position // Prevent the panel resizing below MIN_PANEL_WIDTH while maintain position
if (isBelowMinWidthMainPanel) { if (isBelowMinWidthMainPanel) {
setMainPanelWidth(minRelativeWidth); setMainPanelWidth(minRelativeWidth);
} }
@ -105,7 +113,8 @@ watch(containerWidth, (width) => {
} }
setPositions(mainPanelDimensions.value.relativeLeft); setPositions(mainPanelDimensions.value.relativeLeft);
}); },
);
const currentNodePaneType = computed((): MainPanelType => { const currentNodePaneType = computed((): MainPanelType => {
if (!hasInputSlot.value) return 'inputless'; if (!hasInputSlot.value) return 'inputless';

1
packages/frontend/editor-ui/src/components/NodeDetailsView.vue
View file

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