fix(ui): fix field title styling

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

@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from '@chakra-ui/react';
 import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup';
-import { memo, useContext } from 'react';
+import { memo, useContext, useMemo } from 'react';
 
 import { InvLabel } from './InvLabel';
 import type { InvControlProps } from './types';
@@ -18,9 +18,9 @@ export const InvControl = memo(
         children,
         helperText,
         feature,
-        orientation,
+        orientation: _orientation,
         renderInfoPopoverInPortal = true,
-        isDisabled,
+        isDisabled: _isDisabled,
         labelProps,
         label,
         error,
@@ -29,15 +29,24 @@ export const InvControl = memo(
 
       const ctx = useContext(InvControlGroupContext);
 
+      const orientation = useMemo(
+        () => _orientation ?? ctx.orientation,
+        [_orientation, ctx.orientation]
+      );
+
+      const isDisabled = useMemo(
+        () => _isDisabled ?? ctx.isDisabled,
+        [_isDisabled, ctx.isDisabled]
+      );
+
       return (
         <ChakraFormControl
           ref={ref}
-          variant="withHelperText"
-          orientation={orientation ?? ctx.orientation}
-          isDisabled={isDisabled ?? ctx.isDisabled}
+          orientation={orientation}
+          isDisabled={isDisabled}
           {...formControlProps}
         >
-          <Flex>
+          <Flex className="invcontrol-label-input-wrapper">
             {label && (
               <InvLabel
                 feature={feature}
@@ -55,26 +64,6 @@ export const InvControl = memo(
           {error && <ChakraFormErrorMessage>{error}</ChakraFormErrorMessage>}
         </ChakraFormControl>
       );
-
-      return (
-        <ChakraFormControl
-          ref={ref}
-          isDisabled={isDisabled ?? ctx.isDisabled}
-          orientation={orientation ?? ctx.orientation}
-          {...formControlProps}
-        >
-          {label && (
-            <InvLabel
-              feature={feature}
-              renderInfoPopoverInPortal={renderInfoPopoverInPortal}
-              {...labelProps}
-            >
-              {label}
-            </InvLabel>
-          )}
-          {children}
-        </ChakraFormControl>
-      );
     }
   )
 );

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

@@ -13,29 +13,22 @@ const {
   defineMultiStyleConfig: defineFormMultiStyleConfig,
 } = createMultiStyleConfigHelpers(formParts.keys);
 
-const formBaseStyle = defineFormPartsStyle((props) => {
-  return {
-    container: {
+const formBaseStyle = defineFormPartsStyle((props) => ({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 4,
+    h: 'unset',
+    '> .invcontrol-label-input-wrapper': {
       display: 'flex',
       flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
       alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
       gap: props.orientation === 'vertical' ? 2 : 4,
-    },
-  };
-});
-
-const withHelperText = defineFormPartsStyle(() => ({
-  container: {
-    flexDirection: 'column',
-    gap: 0,
-    h: 'unset',
-    '> div': {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 4,
-      h: 8,
+      minH: 8,
       w: 'full',
+      _invalid: {
+        color: 'error.300',
+      },
     },
   },
   helperText: {
@@ -48,9 +41,6 @@ const withHelperText = defineFormPartsStyle(() => ({
 
 export const formTheme = defineFormMultiStyleConfig({
   baseStyle: formBaseStyle,
-  variants: {
-    withHelperText,
-  },
 });
 
 const formLabelBaseStyle = defineStyle(() => {
@@ -65,6 +55,8 @@ const formLabelBaseStyle = defineStyle(() => {
     transitionDuration: 'normal',
     whiteSpace: 'nowrap',
     userSelect: 'none',
+    h: 'full',
+    alignItems: 'center',
     _disabled: {
       opacity: 0.4,
     },