style: DOM reduction, re-coloring

Author: DrJKL

src/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -5,7 +5,7 @@
     v-tooltip.left="tooltipConfig"
     :class="
       cn(
-        'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
+        'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
         'cursor-crosshair',
         props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
         {

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -31,7 +31,7 @@
         <div
           :class="
             cn(
-              'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-center',
+              'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-stretch',
               widget.slotMetadata?.linked && 'opacity-100'
             )
           "

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -11,11 +11,16 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 </script>
 
 <template>
-  <div class="grid grid-cols-subgrid min-w-0 justify-between gap-1">
-    <div v-if="!hideLayoutField" class="relative flex min-w-0 items-center">
-      <p v-if="widget.name" class="truncate m-0">
+  <div
+    class="grid grid-cols-subgrid min-w-0 justify-between gap-1 text-node-component-slot-text"
+  >
+    <div
+      v-if="!hideLayoutField"
+      class="relative flex min-w-0 items-center truncate align-middle"
+    >
+      <template v-if="widget.name">
         {{ widget.label || widget.name }}
-      </p>
+      </template>
     </div>
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">