Improve red-ui-node-icon css and add red-ui-node-icon-small modifier class

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -1133,6 +1133,8 @@ RED.utils = (function() {
     }
 
     function createNodeIcon(node, includeLabel) {
+        var container = $('<span class="red-ui-node-icon-container">');
+
         var def = node._def;
         var nodeDiv = $('<div>',{class:"red-ui-node-icon"})
         if (node.type === "_selection_") {
@@ -1156,9 +1158,9 @@ RED.utils = (function() {
         var icon_url = RED.utils.getNodeIcon(def,node);
         RED.utils.createIconElement(icon_url, nodeDiv, true);
 
+        nodeDiv.appendTo(container);
+
         if (includeLabel) {
-            var container = $('<span>');
-            nodeDiv.appendTo(container);
             var labelText = RED.utils.getNodeLabel(node,node.name || (node.type+": "+node.id));
             var label = $('<div>',{class:"red-ui-node-label"}).appendTo(container);
             if (labelText) {
@@ -1166,9 +1168,8 @@ RED.utils = (function() {
             } else {
                 label.html("&nbsp;")
             }
-            return container;
         }
-        return nodeDiv;
+        return container;
     }
 
     function getDarkerColor(c) {

packages/node_modules/@node-red/editor-client/src/sass/palette.scss

@@ -240,9 +240,9 @@
 }
 .red-ui-node-icon {
     display: inline-block;
-    float:left;
     width: 24px;
     height: 20px;
+    line-height: 20px;
     margin-top: 1px;
     // width: 30px;
     // height: 25px;
@@ -266,10 +266,28 @@
         left: 0px;
     }
 }
+.red-ui-node-icon-container {
+    display: flex;
+    align-items: center;
+}
+.red-ui-node-icon-container.red-ui-node-icon-small {
+    .red-ui-node-icon {
+        width: 18px;
+        height: 15px;
+        line-height: 15px;
+        .red-ui-palette-icon {
+            width: 15px;
+        }
+        .red-ui-palette-icon-fa {
+            font-size: 11px;
+        }
+    }
+    .red-ui-node-label {
+    }
+}
 
 .red-ui-node-label {
-    margin-left: 32px;
-    line-height: 23px;
     white-space: nowrap;
+    margin-left: 4px;
     color: $secondary-text-color;
 }

packages/node_modules/@node-red/editor-client/src/sass/search.scss

@@ -103,7 +103,7 @@
         left: -1px;
     }
     .red-ui-search-result-description {
-        margin-left:28px;
+        margin-left:8px;
     }
     .red-ui-search-result-node-label {
         color: $secondary-text-color;
@@ -133,7 +133,8 @@
 }
 .red-ui-search-result {
     padding: 8px 2px 8px 5px;
-    display: block;
+    display: flex;
+    align-items: start;
     cursor: pointer;
     color: $list-item-color;
     background: $list-item-background;
@@ -156,12 +157,7 @@
         display: table;
         clear: both;
     }
-    .red-ui-palette-icon-fa {
-        top: 6px;
-        left: 3px;
-    }
 }
-
 .red-ui-search-result-node {
     display: inline-block;
     width: 30px;
@@ -180,8 +176,9 @@
 
 }
 .red-ui-search-result-node-description {
-    margin-left: 40px;
+    margin-left: 10px;
     margin-right: 5px;
+    flex-grow: 1;
 }
 .red-ui-search-result-node-label {
     color: $primary-text-color;