Style: Larger Node Text, More Sidebar Alignment (#7223)

## Summary

See what it looks like. How it feels. What do you think?

- Also was able to unify down to a single SearchBox component.

## Changes

- Bigger widget / slot labels
- Smaller header text
- Unified Searchboxes across sidebar tabs

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7223-Style-prototype-with-larger-node-text-2c36d73d365081f8a371c86f178fa1ff)
by [Unito](https://www.unito.io)

---------

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

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { noop } from 'es-toolkit'
 import { inject } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -17,18 +16,12 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 
 <template>
   <div
-    class="grid grid-cols-subgrid min-w-0 items-center justify-between gap-1"
+    class="grid grid-cols-subgrid min-w-0 justify-between gap-1 text-node-component-slot-text"
   >
-    <div
-      v-if="!hideLayoutField"
-      class="relative flex h-full min-w-0 items-center"
-    >
-      <p
-        v-if="widget.name"
-        class="flex-1 truncate text-xs font-normal text-node-component-slot-text my-0"
-      >
+    <div v-if="!hideLayoutField" class="truncate content-center-safe">
+      <template v-if="widget.name">
         {{ widget.label || widget.name }}
-      </p>
+      </template>
     </div>
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">
@@ -39,9 +32,9 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
             widget.borderStyle
           )
         "
-        @pointerdown.stop="noop"
-        @pointermove.stop="noop"
-        @pointerup.stop="noop"
+        @pointerdown.stop
+        @pointermove.stop
+        @pointerup.stop
       >
         <slot />
       </div>