From 2baa33730a926e19fcafe066de46764bf6e1491a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 3 May 2024 11:28:52 +1000
Subject: [PATCH] fix(ui): fix control layer list layout

---
 .../controlLayers/components/ControlLayersPanelContent.tsx    | 4 ++--
 .../src/features/ui/components/ParametersPanelTextToImage.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
index 14bea9bc1e..b78beb3df8 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
@@ -22,13 +22,13 @@ const selectLayerIdTypePairs = createMemoizedSelector(selectControlLayersSlice,
 export const ControlLayersPanelContent = memo(() => {
   const layerIdTypePairs = useAppSelector(selectLayerIdTypePairs);
   return (
-    <Flex flexDir="column" gap={4} w="full" h="full">
+    <Flex flexDir="column" gap={2} w="full" h="full">
       <Flex justifyContent="space-around">
         <AddLayerButton />
         <DeleteAllLayersButton />
       </Flex>
       <ScrollableContent>
-        <Flex flexDir="column" gap={4}>
+        <Flex flexDir="column" gap={2}>
           {layerIdTypePairs.map(({ id, type }) => (
             <LayerWrapper key={id} id={id} type={type} />
           ))}
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
index 6cb9c6d762..abd78d00e4 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -71,7 +71,7 @@ const ParametersPanelTextToImage = () => {
                   </Tab>
                 </TabList>
                 <TabPanels w="full" h="full">
-                  <TabPanel p={0}>
+                  <TabPanel p={0} w="full" h="full">
                     <Flex gap={2} flexDirection="column" h="full" w="full">
                       <ImageSettingsAccordion />
                       <GenerationSettingsAccordion />
@@ -81,7 +81,7 @@ const ParametersPanelTextToImage = () => {
                       <AdvancedSettingsAccordion />
                     </Flex>
                   </TabPanel>
-                  <TabPanel p={0}>
+                  <TabPanel p={0} w="full" h="full">
                     <ControlLayersPanelContent />
                   </TabPanel>
                 </TabPanels>