fix: arbitrary styles, min size <= content, ensure layout calc, trunc… (#6731)
## 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-6cef56cecde5 https://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>
Simula_r
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 143 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |