From 8d4caaabb0ab40d3e2a451687913e0853d029fa4 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 30 Aug 2023 08:40:17 +1200
Subject: [PATCH] ui: Simply collapse spacing

---
 invokeai/frontend/web/src/common/components/IAICollapse.tsx   | 4 ++--
 .../dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx | 2 +-
 .../web/src/features/lora/components/ParamLoraCollapse.tsx    | 2 +-
 .../components/Parameters/Advanced/ParamAdvancedCollapse.tsx  | 2 +-
 .../Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx | 2 +-
 .../Parameters/ControlNet/ParamControlNetCollapse.tsx         | 2 +-
 .../components/Parameters/Noise/ParamNoiseCollapse.tsx        | 2 +-
 .../components/Parameters/Seamless/ParamSeamlessCollapse.tsx  | 2 +-
 .../src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx | 2 +-
 .../sdxl/components/SDXLImageToImageTabCoreParameters.tsx     | 2 --
 .../sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx    | 2 --
 .../tabs/ImageToImage/ImageToImageTabCoreParameters.tsx       | 2 --
 .../tabs/TextToImage/TextToImageTabCoreParameters.tsx         | 2 --
 .../tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx        | 2 --
 14 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAICollapse.tsx b/invokeai/frontend/web/src/common/components/IAICollapse.tsx
index a5e08e6ddc..c2e6cebe99 100644
--- a/invokeai/frontend/web/src/common/components/IAICollapse.tsx
+++ b/invokeai/frontend/web/src/common/components/IAICollapse.tsx
@@ -86,8 +86,8 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
       <Collapse in={isOpen} animateOpacity style={{ overflow: 'unset' }}>
         <Box
           sx={{
-            p: 2,
-            pt: 3,
+            p: 4,
+            pb: 4,
             borderBottomRadius: 'base',
             bg: 'base.150',
             _dark: {
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx
index a363520ab7..70aadcd4ce 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx
@@ -32,7 +32,7 @@ const ParamDynamicPromptsCollapse = () => {
 
   return (
     <IAICollapse label="Dynamic Prompts" activeLabel={activeLabel}>
-      <Flex sx={{ gap: 2, flexDir: 'column', pb: 2, px: 2 }}>
+      <Flex sx={{ gap: 2, flexDir: 'column' }}>
         <ParamDynamicPromptsToggle />
         <ParamDynamicPromptsCombinatorial />
         <ParamDynamicPromptsMaxPrompts />
diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx
index c0b804732c..c2edd94106 100644
--- a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx
@@ -32,7 +32,7 @@ const ParamLoraCollapse = () => {
 
   return (
     <IAICollapse label="LoRA" activeLabel={activeLabel}>
-      <Flex sx={{ flexDir: 'column', gap: 2, px: 2, pb: 2 }}>
+      <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamLoRASelect />
         <ParamLoraList />
       </Flex>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
index 07ce1ad29a..bca1402571 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
@@ -29,7 +29,7 @@ export default function ParamAdvancedCollapse() {
 
   return (
     <IAICollapse label="Advanced" activeLabel={activeLabel}>
-      <Flex sx={{ flexDir: 'column', gap: 2, px: 2, pb: 2 }}>
+      <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamClipSkip />
       </Flex>
     </IAICollapse>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
index f2da288e59..8907e46e5f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
@@ -15,7 +15,7 @@ const ParamInfillCollapse = () => {
 
   return (
     <IAICollapse label={t('parameters.infillScalingHeader')}>
-      <Flex sx={{ gap: 2, flexDirection: 'column', pb: 2 }}>
+      <Flex sx={{ gap: 2, flexDirection: 'column' }}>
         <SubParametersWrapper>
           <ParamInfillMethod />
           <ParamInfillTilesize />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
index 793c9275d5..9732e34c84 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
@@ -69,7 +69,7 @@ const ParamControlNetCollapse = () => {
 
   return (
     <IAICollapse label="ControlNet" activeLabel={activeLabel}>
-      <Flex sx={{ flexDir: 'column', gap: 2, pb: 1 }}>
+      <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <Flex
           sx={{
             w: '100%',
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx
index e6733495b1..0419ecc656 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx
@@ -42,7 +42,7 @@ const ParamNoiseCollapse = () => {
       label={t('parameters.noiseSettings')}
       activeLabel={activeLabel}
     >
-      <Flex sx={{ gap: 2, flexDirection: 'column', px: 2, pb: 2 }}>
+      <Flex sx={{ gap: 2, flexDirection: 'column' }}>
         <ParamNoiseToggle />
         <ParamCpuNoiseToggle />
         {isPerlinNoiseEnabled && <ParamPerlinNoise />}
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
index ffc39dac2b..099090fe3f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
@@ -50,7 +50,7 @@ const ParamSeamlessCollapse = () => {
       label={t('parameters.seamlessTiling')}
       activeLabel={activeLabel}
     >
-      <Flex sx={{ gap: 5, px: 2 }}>
+      <Flex sx={{ gap: 5 }}>
         <Box flexGrow={1}>
           <ParamSeamlessXAxis />
         </Box>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx
index ae8f2ab020..fcf4d0bcd3 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx
@@ -32,7 +32,7 @@ const ParamSDXLRefinerCollapse = () => {
 
   return (
     <IAICollapse label="Refiner" activeLabel={activeLabel}>
-      <Flex sx={{ gap: 2, flexDir: 'column', px: 2, pb: 2 }}>
+      <Flex sx={{ gap: 2, flexDir: 'column' }}>
         <ParamUseSDXLRefiner />
         <ParamSDXLRefinerModelSelect />
         <Flex gap={2} flexDirection={shouldUseSliders ? 'column' : 'row'}>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx
index 29179e1778..dae462ad47 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx
@@ -37,8 +37,6 @@ const SDXLImageToImageTabCoreParameters = () => {
         sx={{
           flexDirection: 'column',
           gap: 3,
-          px: 2,
-          pb: 2,
         }}
       >
         {shouldUseSliders ? (
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx
index eee0b9640f..4cfbdeb895 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx
@@ -35,8 +35,6 @@ const SDXLUnifiedCanvasTabCoreParameters = () => {
         sx={{
           flexDirection: 'column',
           gap: 3,
-          px: 2,
-          pb: 2,
         }}
       >
         {shouldUseSliders ? (
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
index a41e7b134c..5c6f68e6ed 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
@@ -37,8 +37,6 @@ const ImageToImageTabCoreParameters = () => {
         sx={{
           flexDirection: 'column',
           gap: 3,
-          px: 2,
-          pb: 2,
         }}
       >
         {shouldUseSliders ? (
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
index d4a28858c8..152efd3e17 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
@@ -34,8 +34,6 @@ const TextToImageTabCoreParameters = () => {
         sx={{
           flexDirection: 'column',
           gap: 3,
-          px: 2,
-          pb: 2,
         }}
       >
         {shouldUseSliders ? (
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
index 608e4d73f2..36f7ff7320 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
@@ -35,8 +35,6 @@ const UnifiedCanvasCoreParameters = () => {
         sx={{
           flexDirection: 'column',
           gap: 3,
-          px: 2,
-          pb: 2,
         }}
       >
         {shouldUseSliders ? (