diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx index c4e603e731..55d999da16 100644 --- a/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx +++ b/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx @@ -45,6 +45,7 @@ export const InvControl = memo( orientation={orientation} isDisabled={isDisabled} {...formControlProps} + {...ctx.controlProps} > {label && ( diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx index 41f7653947..5e23834e23 100644 --- a/invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx +++ b/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'; }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx index 024c4122bd..fee2eb2c67 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx +++ b/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 && } - {hasImageOutput && } + + {isCacheEnabled && } + {hasImageOutput && } + ); };