From 9ccffee82c296d063f83e9f38269ef88b9b392f3 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 29 Sep 2021 19:06:34 +0100
Subject: [PATCH] Ensure config-node select inherits width properly from input
 Fixes #3001

---
 .../editor-client/src/js/ui/editor.js         | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index b6c11e5f3..d7da5d06e 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -250,25 +250,24 @@ RED.editor = (function() {
         var newWidth = input.width();
         var attrStyle = input.attr('style');
         var m;
-        if ((m = /width\s*:\s*(\d+(%|[a-z]+))/i.exec(attrStyle)) !== null) {
-            newWidth = m[1];
+        if ((m = /width\s*:\s*([^;]+)/i.exec(attrStyle)) !== null) {
+            newWidth = m[1].trim();
         } else {
             newWidth = "70%";
         }
-        var outerWrap = $("<div></div>").css({display:'inline-block',position:'relative'});
-        var selectWrap = $("<div></div>").css({position:'absolute',left:0,right:'40px'}).appendTo(outerWrap);
-        var select = $('<select id="'+prefix+'-'+property+'"></select>').appendTo(selectWrap);
-
-        outerWrap.width(newWidth).height(input.height());
-        if (outerWrap.width() === 0) {
-            outerWrap.width("70%");
-        }
+        var outerWrap = $("<div></div>").css({
+            width: newWidth,
+            display:'inline-flex'
+        });
+        var select = $('<select id="'+prefix+'-'+property+'"></select>').appendTo(outerWrap);
         input.replaceWith(outerWrap);
         // set the style attr directly - using width() on FF causes a value of 114%...
-        select.attr('style',"width:100%");
+        select.css({
+            'flex-grow': 1
+        });
         updateConfigNodeSelect(property,type,node[property],prefix);
         $('<a id="'+prefix+'-lookup-'+property+'" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
-            .css({position:'absolute',right:0,top:0})
+            .css({"margin-left":"10px"})
             .appendTo(outerWrap);
         $('#'+prefix+'-lookup-'+property).on("click", function(e) {
             showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);