From efb571401ce3b4fef6bf546e461d33eb43ff32fb Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 2 May 2024 08:50:19 +1000
Subject: [PATCH] feat(ui): tweak control adapter layout

---
 .../ControlAndIPAdapter/ControlAdapter.tsx    | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
index 986e9a6373..3a160f91d4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
+import { Box, Divider, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
 import { ControlAdapterModelCombobox } from 'features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox';
 import type {
   ControlMode,
@@ -48,7 +48,7 @@ export const ControlAdapter = memo(
     const [isExpanded, toggleIsExpanded] = useToggle(false);
 
     return (
-      <Flex flexDir="column" gap={4} position="relative" w="full">
+      <Flex flexDir="column" gap={3} position="relative" w="full">
         <Flex gap={3} alignItems="center" w="full">
           <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
             <ControlAdapterModelCombobox modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} />
@@ -71,7 +71,7 @@ export const ControlAdapter = memo(
             }
           />
         </Flex>
-        <Flex gap={4} w="full" alignItems="center">
+        <Flex gap={3} w="full" alignItems="center">
           <Flex flexDir="column" gap={3} w="full">
             {controlAdapter.type === 'controlnet' && (
               <ControlAdapterControlModeSelect
@@ -95,13 +95,19 @@ export const ControlAdapter = memo(
           </Flex>
         </Flex>
         {isExpanded && (
-          <Flex flexDir="column" gap={3} w="full">
-            <ControlAdapterProcessorTypeSelect
-              config={controlAdapter.processorConfig}
-              onChange={onChangeProcessorConfig}
-            />
-            <ControlAdapterProcessorConfig config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
-          </Flex>
+          <>
+            <Divider />
+            <Flex flexDir="column" gap={3} w="full">
+              <ControlAdapterProcessorTypeSelect
+                config={controlAdapter.processorConfig}
+                onChange={onChangeProcessorConfig}
+              />
+              <ControlAdapterProcessorConfig
+                config={controlAdapter.processorConfig}
+                onChange={onChangeProcessorConfig}
+              />
+            </Flex>
+          </>
         )}
       </Flex>
     );