## Summary
### Problem:
After [vue node compacting
PR](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6687) the white
space within the node has been greatly reduced, lowering the min
intrinsic size, thus allowing us to reduce the amount we need to scale
up via ensureCorrectLayoutScale(), therefore increasing readability of
nodes. Great!
However, a side effect of reducing the scale factor means nodes with
larger min content will not be scaled up enough causing nodes to be too
large in many cases.
For example, if the min intrinsic width is very long due to input
length:
<img width="807" height="519" alt="image"
src="https://github.com/user-attachments/assets/a6ea3852-bed5-49b2-b10e-c2e65c6450b2"
/>
### Solution:
Allow for nodes to be resized less than their intrinsic min width. And
truncate widget inputs like many other node UIs do.
IMPORTANT: when a node is added via search or other, it will still get a
min size based on its intrinsic content it just wont be the min width!
So best of both worlds.
<img width="670" height="551" alt="image"
src="https://github.com/user-attachments/assets/f4f5ec8c-037e-472f-a5a1-d8a59a87c0b0"
/>
this means we choose a default min width and clamp resize to it. This
also means we have to remove the arbitrary min width values that were
sprinkled around the vue node widgets. They are not needed because
instead of min width, they can take up full width and inherit the sizing
from the node min width! This makes nodes like little browser windows
and widgets are just responsive elements with in. Much more natural imo.
### Bonus
- Set ensureCorrectLayouScale() to scale factor of 1.2 which means vue
nodes are now only being set 20% bigger than LG. That covers for the
height difference we cant change!
- Fix ensureCorrectLayouScale() to offset y position for groups / better
alignment
- Get rid of arbitrary inflexible min width like min-[417px] which
shouldnt have been used the first place
- Make Select and Input overlay portals width set to their content
## Changes
**What**:
- Node resizing behavior
- Node widget min width
- Widget input and slot truncation
- Misc arbitrary styling that should have been fluid
## Screenshots (if applicable)
https://github.com/user-attachments/assets/3ea4b8fe-565a-47f7-b3ab-6cef56cecde5https://github.com/user-attachments/assets/2fe1e1a0-a9dc-4000-b865-ce2d8c7f3606
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6731-fix-arbitrary-styles-min-size-content-ensure-layout-calc-trunc-2af6d73d365081eab507c2f1638a4194)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
* feat: Initial shadcn configuration
* component: Add Slider component from shadcn-vue
* deps: Add tw-animate-css
* component: Align slider with Figma styles
* component: Set the step value for the slider, update styles
* fix: update component tests to work with Array of values
* vite: Don't reload dev server for test changes
* component: Swap text for a number input kept in sync with the slider
* cleanup: Don't need the override if the input isn't type="number"
* test: add step size tests
* cleanup: Don't need cn for these
* css: Update token names to match new Figma Variables
* lint: Fix camelCase vs train-case in passthrough
* feat: If the value is deleted, revert to the slider state cc: @PabloWiedemann
* feat: Improve cursor styles, grabbable thumb, clickable track
* lint: temporarily disable some warnings
* feat: Grabbing while sliding (most of the time)
