From 7b428b5240d884a23f255407eb59a92731f4c666 Mon Sep 17 00:00:00 2001
From: mickr777 <115216705+mickr777@users.noreply.github.com>
Date: Fri, 21 Jul 2023 08:03:01 +1000
Subject: [PATCH] Make height smaller and allow width to change with node

---
 .../fields/StringInputFieldComponent.tsx          | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/StringInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/StringInputFieldComponent.tsx
index 7a109411a0..fba37ed020 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/StringInputFieldComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/StringInputFieldComponent.tsx
@@ -9,9 +9,14 @@ import { ChangeEvent, memo } from 'react';
 import { FieldComponentProps } from './types';
 
 const StringInputFieldComponent = (
-  props: FieldComponentProps<StringInputFieldValue, StringInputFieldTemplate>
+  props: FieldComponentProps<
+    StringInputFieldValue,
+    StringInputFieldTemplate
+  > & {
+    nodeWidth: number;
+  }
 ) => {
-  const { nodeId, field } = props;
+  const { nodeId, field, nodeWidth } = props;
   const dispatch = useAppDispatch();
 
   const handleValueChanged = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -24,11 +29,13 @@ const StringInputFieldComponent = (
     );
   };
 
+  const textareaWidth = nodeWidth - 20;
+
   return (
     <Textarea
       style={{
-        height: '200px',
-        width: '350px',
+        height: '150px',
+        width: `${textareaWidth}px`,
         resize: 'none',
         overflowY: 'auto',
       }}