From 886fb45ad213dbe218f68d8c9b499dab23e26786 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Sun, 4 Aug 2024 11:30:48 +0100 Subject: [PATCH 1/2] Adjust type search dialog position to prevent x-overflow fixes #4843 --- .../@node-red/editor-client/src/js/ui/typeSearch.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js index 3d05fd1c8..2d6c62b04 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js @@ -279,6 +279,11 @@ RED.typeSearch = (function() { if ($("#red-ui-main-container").height() - opts.y - 195 < 0) { opts.y = opts.y - 275; } + const dialogWidth = dialog.width() || 300 // default is 300 (defined in class .red-ui-search) + const mainWidth = $("#red-ui-main-container").width() + if (mainWidth > dialogWidth && mainWidth - opts.x - dialogWidth < 0) { + opts.x = opts.x - (dialogWidth - RED.view.node_width) + } dialog.css({left:opts.x+"px",top:opts.y+"px"}).show(); searchResultsDiv.slideDown(300); setTimeout(function() { From b62c17f94bab934596ffc63e7435385320013394 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Sun, 4 Aug 2024 11:34:29 +0100 Subject: [PATCH 2/2] use workspace width to contain the search box --- .../@node-red/editor-client/src/js/ui/typeSearch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js index 2d6c62b04..703b57309 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js @@ -280,8 +280,8 @@ RED.typeSearch = (function() { opts.y = opts.y - 275; } const dialogWidth = dialog.width() || 300 // default is 300 (defined in class .red-ui-search) - const mainWidth = $("#red-ui-main-container").width() - if (mainWidth > dialogWidth && mainWidth - opts.x - dialogWidth < 0) { + const workspaceWidth = $('#red-ui-workspace').width() + if (workspaceWidth > dialogWidth && workspaceWidth - opts.x - dialogWidth < 0) { opts.x = opts.x - (dialogWidth - RED.view.node_width) } dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();