fix(ui): form element settings obscured by container

Author: psychedelicious

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementSettings.tsx

@@ -9,6 +9,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { formElementContainerDataChanged } from 'features/nodes/store/workflowSlice';
@@ -36,22 +37,24 @@ export const ContainerElementSettings = memo(({ element }: { element: ContainerE
       <PopoverTrigger>
         <IconButton aria-label="settings" icon={<PiWrenchFill />} variant="link" size="sm" alignSelf="stretch" />
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverBody>
-          <FormControl>
-            <FormLabel m={0}>{t('workflows.builder.layout')}</FormLabel>
-            <ButtonGroup variant="outline" size="sm">
-              <Button onClick={setLayoutToRow} colorScheme={layout === 'row' ? 'invokeBlue' : 'base'}>
-                {t('workflows.builder.row')}
-              </Button>
-              <Button onClick={setLayoutToColumn} colorScheme={layout === 'column' ? 'invokeBlue' : 'base'}>
-                {t('workflows.builder.column')}
-              </Button>
-            </ButtonGroup>
-          </FormControl>
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverBody>
+            <FormControl>
+              <FormLabel m={0}>{t('workflows.builder.layout')}</FormLabel>
+              <ButtonGroup variant="outline" size="sm">
+                <Button onClick={setLayoutToRow} colorScheme={layout === 'row' ? 'invokeBlue' : 'base'}>
+                  {t('workflows.builder.row')}
+                </Button>
+                <Button onClick={setLayoutToColumn} colorScheme={layout === 'column' ? 'invokeBlue' : 'base'}>
+                  {t('workflows.builder.column')}
+                </Button>
+              </ButtonGroup>
+            </FormControl>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx

@@ -7,6 +7,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   Switch,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
@@ -65,18 +66,20 @@ export const NodeFieldElementSettings = memo(({ element }: { element: NodeFieldE
       <PopoverTrigger>
         <IconButton aria-label="settings" icon={<PiWrenchFill />} variant="link" size="sm" alignSelf="stretch" />
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverBody minW={48}>
-          <FormControl>
-            <FormLabel flex={1}>{t('workflows.builder.showDescription')}</FormLabel>
-            <Switch size="sm" isChecked={showDescription} onChange={toggleShowDescription} />
-          </FormControl>
-          {settings?.type === 'integer-field-config' && <NodeFieldElementIntegerConfig id={id} config={settings} />}
-          {settings?.type === 'float-field-config' && <NodeFieldElementFloatSettings id={id} config={settings} />}
-          {settings?.type === 'string-field-config' && <NodeFieldElementStringSettings id={id} config={settings} />}
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverBody minW={48}>
+            <FormControl>
+              <FormLabel flex={1}>{t('workflows.builder.showDescription')}</FormLabel>
+              <Switch size="sm" isChecked={showDescription} onChange={toggleShowDescription} />
+            </FormControl>
+            {settings?.type === 'integer-field-config' && <NodeFieldElementIntegerConfig id={id} config={settings} />}
+            {settings?.type === 'float-field-config' && <NodeFieldElementFloatSettings id={id} config={settings} />}
+            {settings?.type === 'string-field-config' && <NodeFieldElementStringSettings id={id} config={settings} />}
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });