🐛 fix(parameterComponent): fix styling issue in tooltip and icon rendering in ParameterComponent

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -99,44 +99,51 @@ export default function ParameterComponent({
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
 
-  refHtml.current = groupedObj.map((item, i) => {
+    refHtml.current = groupedObj.map((item, i) => {
-    return (
+      const Icon: any = nodeIconsLucide[item.family];
-      <span
+      return (
-        key={getRandomKeyByssmm() + item.family + i}
+        <span
-        className={classNames(
+          key={getRandomKeyByssmm() + item.family + i}
-          i > 0 ? "mt-3 flex items-center" : "flex items-center"
+          className={classNames(
-        )}
+            i > 0 ? "mt-2 flex items-center" : "flex items-center"
-      >
+          )}
-        <div
-          className="h-6 w-6"
-          style={{
-            color: nodeColors[item.family],
-          }}
         >
-          {React.createElement(nodeIconsLucide[item.family])}
+          <div
-        </div>
+            className="h-5 w-5"
-        <span className="ps-2 text-foreground">
+            style={{
-          {nodeNames[item.family] ?? ""}{" "}
+              color: nodeColors[item.family],
-          <span>
+            }}
-            {" "}
+          >
-            -&nbsp;
+            <Icon
-            {item.type.split(", ").length > 2
+            className="h-5 w-5"
-              ? item.type.split(", ").map((el, i) => (
+
-                  <React.Fragment key={el + i}>
+              strokeWidth={1.5}
-                    <span>
+              style={{
-                      {i === item.type.split(", ").length - 1
+                color: nodeColors[item.family] ?? nodeColors.unknown,
-                        ? el
+              }}
-                        : (el += `, `)}
+            />
-                    </span>
+          </div>
-                  </React.Fragment>
+          <span className="ps-2 text-xs text-foreground">
-                ))
+            {nodeNames[item.family] ?? ""}{" "}
-              : item.type}
+            <span className="text-xs">
+              {" "}
+              -&nbsp;
+              {item.type.split(", ").length > 2
+                ? item.type.split(", ").map((el, i) => (
+                    <React.Fragment key={el + i}>
+                      <span>
+                        {i === item.type.split(", ").length - 1
+                          ? el
+                          : (el += `, `)}
+                      </span>
+                    </React.Fragment>
+                  ))
+                : item.type}
+            </span>
           </span>
         </span>
-      </span>
+      );
-    );
+    });
-  });
-  
   }, [tooltipTitle]);
 
   return (
@@ -174,7 +181,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
+            style="max-w-[30vw] max-h-[20vh] overflow-auto custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}