fix(ui): better node footer spacing

Author: psychedelicious

invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx

@@ -45,6 +45,7 @@ export const InvControl = memo(
           orientation={orientation}
           isDisabled={isDisabled}
           {...formControlProps}
+          {...ctx.controlProps}
         >
           <Flex className="invcontrol-label-wrapper">
             {label && (

invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx

@@ -1,9 +1,10 @@
-import type { FormLabelProps } from '@chakra-ui/react';
+import type { FormControlProps, FormLabelProps } from '@chakra-ui/react';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo } from 'react';
 
 export type InvControlGroupProps = {
   labelProps?: FormLabelProps;
+  controlProps?: FormControlProps;
   isDisabled?: boolean;
   orientation?: 'horizontal' | 'vertical';
 };

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx

@@ -1,4 +1,6 @@
+import type { ChakraProps } from '@chakra-ui/react';
 import { Flex } from '@chakra-ui/react';
+import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -11,6 +13,8 @@ type Props = {
   nodeId: string;
 };
 
+const props: ChakraProps = { w: 'unset' };
+
 const InvocationNodeFooter = ({ nodeId }: Props) => {
   const hasImageOutput = useHasImageOutput(nodeId);
   const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
@@ -20,13 +24,16 @@ const InvocationNodeFooter = ({ nodeId }: Props) => {
       layerStyle="nodeFooter"
       w="full"
       borderBottomRadius="base"
+      gap={4}
       px={2}
       py={0}
       h={8}
       justifyContent="space-between"
     >
-      {isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />}
-      {hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />}
+      <InvControlGroup controlProps={props} labelProps={props}>
+        {isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />}
+        {hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />}
+      </InvControlGroup>
     </Flex>
   );
 };