feat(ui): fix control adapters styling

invokeai/frontend/web/src/common/components/InvControl/theme.ts

@@ -14,8 +14,7 @@ const formBaseStyle = definePartsStyle((props) => {
       display: 'flex',
       flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
       alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
-      gap: 4,
+      gap: props.orientation === 'vertical' ? 2 : 4,
-      // h: props.orientation === 'vertical' ? 'unset' : 8,
     },
   };
 });

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx

@@ -2,6 +2,7 @@ import { ChevronUpIcon } from '@chakra-ui/icons';
 import { Box, Flex } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
+import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
@@ -29,6 +30,10 @@ import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapter
 import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode';
 import ParamControlAdapterWeight from './parameters/ParamControlAdapterWeight';
 
+const labelProps: InvLabelProps = {
+  flexGrow: 1,
+};
+
 const ControlAdapterConfig = (props: { id: string; number: number }) => {
   const { id, number } = props;
   const controlAdapterType = useControlAdapterType(id);
@@ -66,14 +71,17 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
   return (
     <Flex
       flexDir="column"
-      gap={3}
+      gap={4}
-      p={2}
+      p={4}
       borderRadius="base"
       position="relative"
       bg="base.750"
     >
       <Flex gap={2} alignItems="center" justifyContent="space-between">
-        <InvControl label={t(`controlnet.${controlAdapterType}`, { number })}>
+        <InvControl
+          label={t(`controlnet.${controlAdapterType}`, { number })}
+          labelProps={labelProps}
+        >
           <InvSwitch
             aria-label={t('controlnet.toggleControlNet')}
             isChecked={isEnabled}
@@ -81,7 +89,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           />
         </InvControl>
       </Flex>
-      <Flex gap={2} alignItems="center">
+      <Flex gap={4} alignItems="center">
         <Box
           minW={0}
           w="full"
@@ -134,18 +142,9 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
         />
       </Flex>
 
-      <Flex w="full" flexDir="column" gap={3}>
+      <Flex w="full" flexDir="column" gap={4}>
         <Flex gap={4} w="full" alignItems="center">
-          <Flex
+          <Flex flexDir="column" gap={4} h={32} w="full">
-            flexDir="column"
-            gap={3}
-            h={28}
-            w="full"
-            paddingInlineStart={1}
-            paddingInlineEnd={isExpanded ? 1 : 0}
-            pb={2}
-            justifyContent="space-between"
-          >
             <ParamControlAdapterWeight id={id} />
             <ParamControlAdapterBeginEnd id={id} />
           </Flex>
@@ -153,23 +152,23 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
             <Flex
               alignItems="center"
               justifyContent="center"
-              h={28}
+              h={32}
-              w={28}
+              w={32}
               aspectRatio="1/1"
             >
               <ControlAdapterImagePreview id={id} isSmall />
             </Flex>
           )}
         </Flex>
+      </Flex>
+
+      {isExpanded && (
+        <>
           <Flex gap={2}>
             <ParamControlAdapterControlMode id={id} />
             <ParamControlAdapterResizeMode id={id} />
           </Flex>
           <ParamControlAdapterProcessorSelect id={id} />
-      </Flex>
-
-      {isExpanded && (
-        <>
           <ControlAdapterImagePreview id={id} />
           <ControlAdapterShouldAutoConfig id={id} />
           <ControlAdapterProcessorComponent id={id} />

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx

@@ -1,5 +1,6 @@
 import { useAppDispatch } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
+import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterShouldAutoConfig } from 'features/controlAdapters/hooks/useControlAdapterShouldAutoConfig';
@@ -12,6 +13,10 @@ type Props = {
   id: string;
 };
 
+const labelProps: InvLabelProps = {
+  flexGrow: 1,
+};
+
 const ControlAdapterShouldAutoConfig = ({ id }: Props) => {
   const isEnabled = useControlAdapterIsEnabled(id);
   const shouldAutoConfig = useControlAdapterShouldAutoConfig(id);
@@ -27,7 +32,11 @@ const ControlAdapterShouldAutoConfig = ({ id }: Props) => {
   }
 
   return (
-    <InvControl label={t('controlnet.autoConfigure')} isDisabled={!isEnabled}>
+    <InvControl
+      label={t('controlnet.autoConfigure')}
+      isDisabled={!isEnabled}
+      labelProps={labelProps}
+    >
       <InvSwitch
         isChecked={shouldAutoConfig}
         onChange={handleShouldAutoConfigChanged}

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx

@@ -64,6 +64,7 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => {
       isDisabled={!isEnabled}
       label={t('controlnet.beginEndStepPercent')}
       feature="controlNetBeginEnd"
+      orientation="vertical"
     >
       <InvRangeSlider
         aria-label={['Begin Step %', 'End Step %']}

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx

@@ -34,6 +34,7 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
       label={t('controlnet.weight')}
       isDisabled={!isEnabled}
       feature="controlNetWeight"
+      orientation="vertical"
     >
       <InvSlider
         value={weight}

invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx

@@ -5,7 +5,7 @@ type Props = PropsWithChildren;
 
 export default function ProcessorWrapper(props: Props) {
   return (
-    <Flex flexDir="column" gap={2} pb={2}>
+    <Flex flexDir="column" gap={4}>
       {props.children}
     </Flex>
   );