[style] make Vue widget/slot/label width and spacing align with designs (#6023)

Make the widths and spacing of the widgets/slots/labels match the
[design](https://www.figma.com/design/31uH3r4x3xbIctuRWYW6NM/V3---Vue-Nodes?node-id=6489-33817&m=dev)
which also better matches the interal layout of litegraph nodes.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6023-style-make-Vue-widget-slot-label-width-and-spacing-align-with-designs-2896d73d365081a1a831f396cb4eafc8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

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

@@ -5,7 +5,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="cn('-translate-x-1/2', errorClassesDot)"
+      :class="cn('-translate-x-1/2', 'w-3', errorClassesDot)"
       @pointerdown="onPointerDown"
     />
 

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

@@ -6,7 +6,7 @@
     v-else
     :class="
       cn(
-        'lg-node-widgets flex flex-col gap-2 pr-4',
+        'lg-node-widgets flex flex-col gap-2 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'

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

@@ -15,7 +15,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      class="translate-x-1/2"
+      class="w-3 translate-x-1/2"
       @pointerdown="onPointerDown"
     />
   </div>

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

@@ -14,10 +14,10 @@ defineProps<{
   <div
     class="flex h-[30px] items-center justify-between gap-2 overscroll-contain"
   >
-    <div class="relative mr-4 flex h-6 items-center">
+    <div class="relative flex h-6 items-center">
       <p
         v-if="widget.name"
-        class="lod-toggle w-20 flex-1 truncate text-sm font-normal text-node-component-slot-text"
+        class="lod-toggle w-28 flex-1 truncate text-sm font-normal text-node-component-slot-text"
       >
         {{ widget.label || widget.name }}
       </p>