[Style] Compact Modern Nodes (#6687)

## Summary

Simple and clean is the way that we're making the nodes tonight.

## Changes

- **What**: Smaller minimum widths for nodes and labels
- **What**: Smaller font for the labels
- **What**: Removed outlines for widgets
- **What**: Fixes a text/background issue with buttons on widgets
- **What**: Smaller header
- **What**: Less padding within the node itself

## Review Focus

Check out the new styles and how they align with the Designs.

## Screenshots

| Before | After |
| --- | --- |
| <img width="542" height="486" alt="image"
src="https://github.com/user-attachments/assets/41fe9801-7a43-49ac-87fc-36d3b2ee82fb"
/> | <img width="411" height="388" alt="image"
src="https://github.com/user-attachments/assets/a7c21120-bf67-4039-86b3-c348bcc4341b"
/> |

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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6687-Style-Compact-Modern-Nodes-2aa6d73d365081c48db3c5491c556dc9)
by [Unito](https://www.unito.io)

---------

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

src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts

@@ -1,7 +1,10 @@
-const sharedButtonClasses =
-  '!inline-flex !items-center !justify-center !border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out ' +
-  'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected' +
+import { cn } from '@comfyorg/tailwind-utils'
+
+const sharedButtonClasses = cn(
+  'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out ',
+  'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected',
   'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed'
+)
 
 export function useNumberWidgetButtonPt(options?: {
   roundedLeft?: boolean
@@ -9,15 +12,15 @@ export function useNumberWidgetButtonPt(options?: {
 }) {
   const { roundedLeft = false, roundedRight = false } = options ?? {}
 
-  const increment = `${sharedButtonClasses}${roundedRight ? ' !rounded-r-lg' : ''}`
-  const decrement = `${sharedButtonClasses}${roundedLeft ? ' !rounded-l-lg' : ''}`
+  const increment = cn(sharedButtonClasses, roundedRight && 'rounded-r-lg')
+  const decrement = cn(sharedButtonClasses, roundedLeft && 'rounded-l-lg')
 
   return {
     incrementButton: {
-      class: increment.trim()
+      class: increment
     },
     decrementButton: {
-      class: decrement.trim()
+      class: decrement
     }
   }
 }