From b73fd2a6d2f8396bb986d1085877f2c43c2f1d23 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sun, 23 Apr 2023 00:55:43 +1200
Subject: [PATCH] fix(ui): Set Min Width for Nodes

---
 invokeai/frontend/web/src/app/constants.ts                     | 2 ++
 .../src/features/nodes/components/IAINode/IAINodeResizer.tsx   | 3 ++-
 .../web/src/features/nodes/components/InvocationComponent.tsx  | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/app/constants.ts b/invokeai/frontend/web/src/app/constants.ts
index e7cb1972fa..b9cd5839df 100644
--- a/invokeai/frontend/web/src/app/constants.ts
+++ b/invokeai/frontend/web/src/app/constants.ts
@@ -60,3 +60,5 @@ export const IN_PROGRESS_IMAGE_TYPES: Array<{
   { key: 'Fast', value: 'latents' },
   { key: 'Accurate', value: 'full-res' },
 ];
+
+export const NODE_MIN_WIDTH = 250;
diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx
index 0fa13c82b6..1217540827 100644
--- a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx
@@ -1,3 +1,4 @@
+import { NODE_MIN_WIDTH } from 'app/constants';
 import { memo } from 'react';
 import { NodeResizeControl, NodeResizerProps } from 'reactflow';
 
@@ -14,7 +15,7 @@ const IAINodeResizer = (props: NodeResizerProps) => {
         bottom: 0,
         right: 0,
       }}
-      minWidth={350}
+      minWidth={NODE_MIN_WIDTH}
       {...rest}
     ></NodeResizeControl>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
index c0ddf1c3b3..e6d54a72c5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
@@ -12,6 +12,7 @@ import { RootState } from 'app/store';
 import { AnyInvocationType } from 'services/events/types';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
+import { NODE_MIN_WIDTH } from 'app/constants';
 
 type InvocationComponentWrapperProps = PropsWithChildren & {
   selected: boolean;
@@ -28,6 +29,7 @@ const InvocationComponentWrapper = (props: InvocationComponentWrapperProps) => {
       sx={{
         position: 'relative',
         borderRadius: 'md',
+        minWidth: NODE_MIN_WIDTH,
         boxShadow: props.selected
           ? `${nodeSelectedOutline}, ${nodeShadow}`
           : `${nodeShadow}`,