Style: Grid for widgets (#6891)

## Summary

Keeps the controls and widgets a consistent width, but lets the size be
more flexible

## Screenshots

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6891-Style-Grid-for-widgets-2b56d73d365081a29c30d337f3be1af6)
by [Unito](https://www.unito.io)

---------

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

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

@@ -11,8 +11,10 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex h-[30px] min-w-0 items-center justify-between gap-1">
-    <div class="relative flex h-full min-w-0 w-20 items-center">
+  <div
+    class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
+  >
+    <div class="relative flex h-full min-w-0 items-center">
       <p
         v-if="widget.name"
         class="lod-toggle flex-1 truncate text-xs font-normal text-node-component-slot-text"