Fix: Make textarea fill the area available instead of being resizable. (#6190)
## Summary Invert the sizing of textareas. They now grow based on the container instead of being independently resizable. ## Review Focus Tested the behavior in Note, Markdown Note, CLIP Text Encode, and Subgrpahs with promoted mutliline text widgets. Anything else that might break with this? ## Screenshots (if applicable) https://github.com/user-attachments/assets/4e2da142-d0b7-4629-9814-b637566ac1d6 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6190-Fix-Make-textarea-fill-the-area-available-instead-of-being-resizable-2946d73d3650818a9f77c619deb93d0b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 76 KiB |
@@ -6,7 +6,7 @@
|
||||
v-else
|
||||
:class="
|
||||
cn(
|
||||
'lg-node-widgets flex flex-col gap-2 pr-3',
|
||||
'lg-node-widgets flex flex-col flex-1 gap-2 pr-3',
|
||||
shouldHandleNodePointerEvents
|
||||
? 'pointer-events-auto'
|
||||
: 'pointer-events-none'
|
||||
@@ -19,7 +19,7 @@
|
||||
<div
|
||||
v-for="(widget, index) in processedWidgets"
|
||||
:key="`widget-${index}-${widget.name}`"
|
||||
class="lg-widget-container group flex items-center"
|
||||
class="group flex flex-1 items-stretch"
|
||||
>
|
||||
<!-- Widget Input Slot Dot -->
|
||||
|
||||
|
||||
@@ -195,14 +195,6 @@ describe('WidgetTextarea Value Binding', () => {
|
||||
const textarea = wrapper.find('textarea')
|
||||
expect(textarea.attributes('placeholder')).toBe('Custom placeholder')
|
||||
})
|
||||
|
||||
it('sets default rows attribute', () => {
|
||||
const widget = createMockWidget('test')
|
||||
const wrapper = mountComponent(widget, 'test')
|
||||
|
||||
const textarea = wrapper.find('textarea')
|
||||
expect(textarea.attributes('rows')).toBe('3')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
|
||||
@@ -3,11 +3,12 @@
|
||||
<Textarea
|
||||
v-model="localValue"
|
||||
v-bind="filteredProps"
|
||||
:class="cn(WidgetInputBaseClass, 'w-full text-xs lod-toggle')"
|
||||
:class="
|
||||
cn(WidgetInputBaseClass, 'size-full text-xs lod-toggle resize-none')
|
||||
"
|
||||
:placeholder="placeholder || widget.name || ''"
|
||||
:aria-label="widget.name"
|
||||
size="small"
|
||||
rows="3"
|
||||
fluid
|
||||
data-capture-wheel="true"
|
||||
@update:model-value="onChange"
|
||||
/>
|
||||
|
||||