From 4f088252db06cb713d0ef784c4dcc2a78df92c87 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 23 Aug 2023 21:29:45 +1200
Subject: [PATCH] fix: Restyle the WorkflowPanel

---
 .../TopCenterPanel/WorkflowEditorControls.tsx |  7 +-
 .../sidePanel/NodeEditorPanelGroup.tsx        | 72 ++++++++++---------
 .../sidePanel/workflow/WorkflowPanel.tsx      |  6 +-
 3 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
index 537d21902e..dbe3886b74 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
@@ -1,19 +1,20 @@
+import { Flex } from '@chakra-ui/react';
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
 import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
 import { memo } from 'react';
-import ResetWorkflowButton from './ResetWorkflowButton';
 import LoadWorkflowButton from './LoadWorkflowButton';
+import ResetWorkflowButton from './ResetWorkflowButton';
 import SaveWorkflowButton from './SaveWorkflowButton';
 
 const WorkflowEditorControls = () => {
   return (
-    <>
+    <Flex sx={{ gap: 2 }}>
       <InvokeButton />
       <CancelButton />
       <ResetWorkflowButton />
       <SaveWorkflowButton />
       <LoadWorkflowButton />
-    </>
+    </Flex>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
index acc71e85ec..7b37453894 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
@@ -1,3 +1,4 @@
+import { Flex } from '@chakra-ui/react';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import { memo, useCallback, useRef, useState } from 'react';
@@ -7,6 +8,7 @@ import {
   PanelGroup,
 } from 'react-resizable-panels';
 import 'reactflow/dist/style.css';
+import WorkflowEditorControls from '../flow/panels/TopCenterPanel/WorkflowEditorControls';
 import InspectorPanel from './inspector/InspectorPanel';
 import WorkflowPanel from './workflow/WorkflowPanel';
 
@@ -21,42 +23,46 @@ const NodeEditorPanelGroup = () => {
     }
     panelGroupRef.current.setLayout([50, 50]);
   }, []);
+
   return (
-    <PanelGroup
-      ref={panelGroupRef}
-      id="workflow-panel-group"
-      direction="vertical"
-      style={{ height: '100%', width: '100%' }}
-      storage={panelStorage}
-    >
-      <Panel
-        id="workflow"
-        collapsible
-        onCollapse={setIsTopPanelCollapsed}
-        minSize={25}
-      >
-        <WorkflowPanel />
-      </Panel>
-      <ResizeHandle
+    <Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
+      <WorkflowEditorControls />
+      <PanelGroup
+        ref={panelGroupRef}
+        id="workflow-panel-group"
         direction="vertical"
-        onDoubleClick={handleDoubleClickHandle}
-        collapsedDirection={
-          isTopPanelCollapsed
-            ? 'top'
-            : isBottomPanelCollapsed
-            ? 'bottom'
-            : undefined
-        }
-      />
-      <Panel
-        id="inspector"
-        collapsible
-        onCollapse={setIsBottomPanelCollapsed}
-        minSize={25}
+        style={{ height: '100%', width: '100%' }}
+        storage={panelStorage}
       >
-        <InspectorPanel />
-      </Panel>
-    </PanelGroup>
+        <Panel
+          id="workflow"
+          collapsible
+          onCollapse={setIsTopPanelCollapsed}
+          minSize={25}
+        >
+          <WorkflowPanel />
+        </Panel>
+        <ResizeHandle
+          direction="vertical"
+          onDoubleClick={handleDoubleClickHandle}
+          collapsedDirection={
+            isTopPanelCollapsed
+              ? 'top'
+              : isBottomPanelCollapsed
+              ? 'bottom'
+              : undefined
+          }
+        />
+        <Panel
+          id="inspector"
+          collapsible
+          onCollapse={setIsBottomPanelCollapsed}
+          minSize={25}
+        >
+          <InspectorPanel />
+        </Panel>
+      </PanelGroup>
+    </Flex>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index 2c53ffcbe9..4028467e0e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -8,9 +8,8 @@ import {
 } from '@chakra-ui/react';
 import { memo } from 'react';
 import WorkflowGeneralTab from './WorkflowGeneralTab';
-import WorkflowLinearTab from './WorkflowLinearTab';
 import WorkflowJSONTab from './WorkflowJSONTab';
-import WorkflowEditorControls from '../../flow/panels/TopCenterPanel/WorkflowEditorControls';
+import WorkflowLinearTab from './WorkflowLinearTab';
 
 const WorkflowPanel = () => {
   return (
@@ -25,9 +24,6 @@ const WorkflowPanel = () => {
         gap: 2,
       }}
     >
-      <Flex gap={2}>
-        <WorkflowEditorControls />
-      </Flex>
       <Tabs
         variant="line"
         sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}