fix(ui): fix styling of some form elements

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -1,9 +1,12 @@
+import type { FormLabelProps } from '@invoke-ai/ui';
 import {
   Box,
   Button,
+  ButtonGroup,
   Checkbox,
   Flex,
   FormControl,
+  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
@@ -33,6 +36,10 @@ import {
   PiTrashSimpleFill,
 } from 'react-icons/pi';
 
+const formLabelProps: FormLabelProps = {
+  flexGrow: 1,
+};
+
 const IAICanvasMaskOptions = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -124,6 +131,7 @@ const IAICanvasMaskOptions = () => {
       <PopoverContent>
         <PopoverBody>
           <Flex direction="column" gap={2}>
+            <FormControlGroup formLabelProps={formLabelProps}>
               <FormControl>
                 <FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
                 <Checkbox
@@ -138,12 +146,14 @@ const IAICanvasMaskOptions = () => {
                   onChange={handleChangePreserveMaskedArea}
                 />
               </FormControl>
+            </FormControlGroup>
             <Box pt={2} pb={2}>
               <IAIColorPicker
                 color={maskColor}
                 onChange={handleChangeMaskColor}
               />
             </Box>
+            <ButtonGroup isAttached={false}>
               <Button
                 size="sm"
                 leftIcon={<PiFloppyDiskBackFill />}
@@ -158,6 +168,7 @@ const IAICanvasMaskOptions = () => {
               >
                 {t('unifiedCanvas.clearMask')}
               </Button>
+            </ButtonGroup>
           </Flex>
         </PopoverBody>
       </PopoverContent>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -1,7 +1,9 @@
+import type { FormLabelProps } from '@invoke-ai/ui';
 import {
   Checkbox,
   Flex,
   FormControl,
+  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
@@ -28,6 +30,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiGearSixBold } from 'react-icons/pi';
 
+const formLabelProps: FormLabelProps = {
+  flexGrow: 1,
+};
+
 const IAICanvasSettingsButtonPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -122,6 +128,7 @@ const IAICanvasSettingsButtonPopover = () => {
       <PopoverContent>
         <PopoverBody>
           <Flex direction="column" gap={2}>
+            <FormControlGroup formLabelProps={formLabelProps}>
               <FormControl>
                 <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
                 <Checkbox
@@ -144,7 +151,9 @@ const IAICanvasSettingsButtonPopover = () => {
                 />
               </FormControl>
               <FormControl>
-              <FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel>
+                <FormLabel>
+                  {t('unifiedCanvas.darkenOutsideSelection')}
+                </FormLabel>
                 <Checkbox
                   isChecked={shouldDarkenOutsideBoundingBox}
                   onChange={handleChangeShouldDarkenOutsideBoundingBox}
@@ -185,6 +194,7 @@ const IAICanvasSettingsButtonPopover = () => {
                   onChange={handleChangeShouldAntialias}
                 />
               </FormControl>
+            </FormControlGroup>
             <ClearCanvasHistoryButtonModal />
           </Flex>
         </PopoverBody>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -276,9 +276,9 @@ const IAICanvasToolChooserOptions = () => {
               </Flex>
               <Box w="full" pt={2} pb={2}>
                 <IAIColorPicker
-                  withNumberInput={true}
                   color={brushColor}
                   onChange={handleChangeBrushColor}
+                  withNumberInput
                 />
               </Box>
             </Flex>

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx

@@ -1,8 +1,10 @@
+import type { FormLabelProps } from '@invoke-ai/ui';
 import {
   Checkbox,
   CompositeSlider,
   Flex,
   FormControl,
+  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
@@ -24,6 +26,10 @@ import { RiSettings4Fill } from 'react-icons/ri';
 
 import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';
 
+const formLabelProps: FormLabelProps = {
+  flexGrow: 1,
+};
+
 const GallerySettingsPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -78,6 +84,7 @@ const GallerySettingsPopover = () => {
                 defaultValue={90}
               />
             </FormControl>
+            <FormControlGroup formLabelProps={formLabelProps}>
               <FormControl>
                 <FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
                 <Switch
@@ -92,6 +99,7 @@ const GallerySettingsPopover = () => {
                   onChange={handleChangeAutoAssignBoardOnClick}
                 />
               </FormControl>
+            </FormControlGroup>
             <BoardAutoAddSelect />
           </Flex>
         </PopoverBody>