From 8886e4f6a13f669f140b4b326818adc8449792fc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 15 Sep 2025 11:42:31 +1000
Subject: [PATCH] fix(ui): render popovers in portals to ensure they are on top
 of other ui elements

---
 .../EntityListSelectedEntityActionBarFill.tsx |  29 ++--
 ...tityListSelectedEntityActionBarOpacity.tsx |  35 +++--
 .../Settings/CanvasSettingsPopover.tsx        |  99 ++++++------
 .../components/Tool/ToolFillColorPicker.tsx   |  15 +-
 .../components/Tool/ToolWidthPicker.tsx       |  33 ++--
 .../components/Toolbar/CanvasToolbarScale.tsx |  33 ++--
 .../fields/InputFieldDescriptionPopover.tsx   |   9 +-
 .../BottomLeftPanel/AutoLayoutPopover.tsx     | 143 ++++++++++--------
 .../PostProcessing/PostProcessingPopover.tsx  |  33 ++--
 .../web/src/features/prompt/PromptPopover.tsx |  28 ++--
 .../features/ui/components/Notifications.tsx  |  41 ++---
 11 files changed, 272 insertions(+), 226 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
index 3004ddc0b8e..62928f2094f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
@@ -1,4 +1,13 @@
-import { Box, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Tooltip } from '@invoke-ai/ui-library';
+import {
+  Box,
+  Flex,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Tooltip,
+} from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import RgbColorPicker from 'common/components/ColorPicker/RgbColorPicker';
 import { rgbColorToString } from 'common/util/colorCodeTransformers';
@@ -62,14 +71,16 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
           </Tooltip>
         </Flex>
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverBody minH={64}>
-          <Flex flexDir="column" gap={4}>
-            <RgbColorPicker color={fill.color} onChange={onChangeFillColor} withNumberInput withSwatches />
-            <MaskFillStyle style={fill.style} onChange={onChangeFillStyle} />
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverBody minH={64}>
+            <Flex flexDir="column" gap={4}>
+              <RgbColorPicker color={fill.color} onChange={onChangeFillColor} withNumberInput withSwatches />
+              <MaskFillStyle style={fill.style} onChange={onChangeFillStyle} />
+            </Flex>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx
index 29720212be0..7e38cdd9fda 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx
@@ -12,6 +12,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
 } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -165,22 +166,24 @@ export const EntityListSelectedEntityActionBarOpacity = memo(() => {
           </NumberInput>
         </PopoverAnchor>
       </FormControl>
-      <PopoverContent w={200} pt={0} pb={2} px={4}>
-        <PopoverArrow />
-        <PopoverBody>
-          <CompositeSlider
-            min={0}
-            max={100}
-            value={localOpacity}
-            onChange={onChangeSlider}
-            defaultValue={sliderDefaultValue}
-            marks={marks}
-            formatValue={formatSliderValue}
-            alwaysShowMarks
-            isDisabled={selectedEntityIdentifier === null}
-          />
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent w={200} pt={0} pb={2} px={4}>
+          <PopoverArrow />
+          <PopoverBody>
+            <CompositeSlider
+              min={0}
+              max={100}
+              value={localOpacity}
+              onChange={onChangeSlider}
+              defaultValue={sliderDefaultValue}
+              marks={marks}
+              formatValue={formatSliderValue}
+              alwaysShowMarks
+              isDisabled={selectedEntityIdentifier === null}
+            />
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
index c2eba6db1dd..31ce8bd88a7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
@@ -8,6 +8,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   Text,
   useShiftModifier,
 } from '@invoke-ai/ui-library';
@@ -45,62 +46,64 @@ export const CanvasSettingsPopover = memo(() => {
           alignSelf="stretch"
         />
       </PopoverTrigger>
-      <PopoverContent maxW="280px">
-        <PopoverArrow />
-        <PopoverBody>
-          <Flex direction="column" gap={2}>
-            {/* Behavior Settings */}
-            <Flex direction="column" gap={1}>
-              <Flex align="center" gap={2}>
-                <Icon as={PiPencilFill} boxSize={4} />
-                <Text fontWeight="bold" fontSize="sm" color="base.100">
-                  {t('hotkeys.canvas.settings.behavior')}
-                </Text>
+      <Portal>
+        <PopoverContent maxW="280px">
+          <PopoverArrow />
+          <PopoverBody>
+            <Flex direction="column" gap={2}>
+              {/* Behavior Settings */}
+              <Flex direction="column" gap={1}>
+                <Flex align="center" gap={2}>
+                  <Icon as={PiPencilFill} boxSize={4} />
+                  <Text fontWeight="bold" fontSize="sm" color="base.100">
+                    {t('hotkeys.canvas.settings.behavior')}
+                  </Text>
+                </Flex>
+                <CanvasSettingsInvertScrollCheckbox />
+                <CanvasSettingsPressureSensitivityCheckbox />
+                <CanvasSettingsPreserveMaskCheckbox />
+                <CanvasSettingsClipToBboxCheckbox />
+                <CanvasSettingsOutputOnlyMaskedRegionsCheckbox />
+                <CanvasSettingsSaveAllImagesToGalleryCheckbox />
               </Flex>
-              <CanvasSettingsInvertScrollCheckbox />
-              <CanvasSettingsPressureSensitivityCheckbox />
-              <CanvasSettingsPreserveMaskCheckbox />
-              <CanvasSettingsClipToBboxCheckbox />
-              <CanvasSettingsOutputOnlyMaskedRegionsCheckbox />
-              <CanvasSettingsSaveAllImagesToGalleryCheckbox />
-            </Flex>
 
-            <Divider />
+              <Divider />
 
-            {/* Display Settings */}
-            <Flex direction="column" gap={1}>
-              <Flex align="center" gap={2} color="base.200">
-                <Icon as={PiEyeFill} boxSize={4} />
-                <Text fontWeight="bold" fontSize="sm">
-                  {t('hotkeys.canvas.settings.display')}
-                </Text>
+              {/* Display Settings */}
+              <Flex direction="column" gap={1}>
+                <Flex align="center" gap={2} color="base.200">
+                  <Icon as={PiEyeFill} boxSize={4} />
+                  <Text fontWeight="bold" fontSize="sm">
+                    {t('hotkeys.canvas.settings.display')}
+                  </Text>
+                </Flex>
+                <CanvasSettingsShowProgressOnCanvas />
+                <CanvasSettingsIsolatedStagingPreviewSwitch />
+                <CanvasSettingsIsolatedLayerPreviewSwitch />
+                <CanvasSettingsBboxOverlaySwitch />
+                <CanvasSettingsShowHUDSwitch />
               </Flex>
-              <CanvasSettingsShowProgressOnCanvas />
-              <CanvasSettingsIsolatedStagingPreviewSwitch />
-              <CanvasSettingsIsolatedLayerPreviewSwitch />
-              <CanvasSettingsBboxOverlaySwitch />
-              <CanvasSettingsShowHUDSwitch />
-            </Flex>
 
-            <Divider />
+              <Divider />
 
-            {/* Grid Settings */}
-            <Flex direction="column" gap={1}>
-              <Flex align="center" gap={2} color="base.200">
-                <Icon as={PiSquaresFourFill} boxSize={4} />
-                <Text fontWeight="bold" fontSize="sm">
-                  {t('hotkeys.canvas.settings.grid')}
-                </Text>
+              {/* Grid Settings */}
+              <Flex direction="column" gap={1}>
+                <Flex align="center" gap={2} color="base.200">
+                  <Icon as={PiSquaresFourFill} boxSize={4} />
+                  <Text fontWeight="bold" fontSize="sm">
+                    {t('hotkeys.canvas.settings.grid')}
+                  </Text>
+                </Flex>
+                <CanvasSettingsSnapToGridCheckbox />
+                <CanvasSettingsDynamicGridSwitch />
+                <CanvasSettingsRuleOfThirdsSwitch />
               </Flex>
-              <CanvasSettingsSnapToGridCheckbox />
-              <CanvasSettingsDynamicGridSwitch />
-              <CanvasSettingsRuleOfThirdsSwitch />
-            </Flex>
 
-            <DebugSettings />
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
+              <DebugSettings />
+            </Flex>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
index 1fa70434dfa..c192687e2e9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
@@ -6,6 +6,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   Tooltip,
 } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
@@ -102,12 +103,14 @@ export const ToolFillColorPicker = memo(() => {
           </Tooltip>
         </Flex>
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverBody minH={64}>
-          <RgbaColorPicker color={activeColor} onChange={onColorChange} withNumberInput withSwatches />
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverBody minH={64}>
+            <RgbaColorPicker color={activeColor} onChange={onColorChange} withNumberInput withSwatches />
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolWidthPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolWidthPicker.tsx
index a74d750ae02..3fa270893a3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolWidthPicker.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolWidthPicker.tsx
@@ -12,6 +12,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
 } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -122,21 +123,23 @@ const DropDownToolWidthPickerComponent = memo(
             </NumberInput>
           </PopoverAnchor>
         </FormControl>
-        <PopoverContent w={200} pt={0} pb={2} px={4}>
-          <PopoverArrow />
-          <PopoverBody>
-            <CompositeSlider
-              min={0}
-              max={100}
-              value={mapRawValueToSliderValue(localValue)}
-              onChange={onChangeSlider}
-              defaultValue={sliderDefaultValue}
-              marks={marks}
-              formatValue={formatSliderValue}
-              alwaysShowMarks
-            />
-          </PopoverBody>
-        </PopoverContent>
+        <Portal>
+          <PopoverContent w={200} pt={0} pb={2} px={4}>
+            <PopoverArrow />
+            <PopoverBody>
+              <CompositeSlider
+                min={0}
+                max={100}
+                value={mapRawValueToSliderValue(localValue)}
+                onChange={onChangeSlider}
+                defaultValue={sliderDefaultValue}
+                marks={marks}
+                formatValue={formatSliderValue}
+                alwaysShowMarks
+              />
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
       </Popover>
     );
   }
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx
index 484dcc9d1fc..85dfccbf82d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx
@@ -12,6 +12,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { round } from 'es-toolkit/compat';
@@ -153,21 +154,23 @@ export const CanvasToolbarScale = memo(() => {
             </PopoverTrigger>
           </NumberInput>
         </PopoverAnchor>
-        <PopoverContent w={200} pt={0} pb={2} px={4}>
-          <PopoverArrow />
-          <PopoverBody>
-            <CompositeSlider
-              min={0}
-              max={100}
-              value={mapRawValueToSliderValue(localScale)}
-              onChange={onChangeSlider}
-              defaultValue={sliderDefaultValue}
-              marks={marks}
-              formatValue={formatSliderValue}
-              alwaysShowMarks
-            />
-          </PopoverBody>
-        </PopoverContent>
+        <Portal>
+          <PopoverContent w={200} pt={0} pb={2} px={4}>
+            <PopoverArrow />
+            <PopoverBody>
+              <CompositeSlider
+                min={0}
+                max={100}
+                value={mapRawValueToSliderValue(localScale)}
+                onChange={onChangeSlider}
+                defaultValue={sliderDefaultValue}
+                marks={marks}
+                formatValue={formatSliderValue}
+                alwaysShowMarks
+              />
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
       </Popover>
       <ZoomInButton />
     </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx
index 6b020a221c4..5aa236a7bda 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx
@@ -5,6 +5,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   Textarea,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
@@ -36,9 +37,11 @@ export const InputFieldDescriptionPopover = memo(({ nodeId, fieldName }: Props)
           size="xs"
         />
       </PopoverTrigger>
-      <PopoverContent p={2} w={256}>
-        <Content nodeId={nodeId} fieldName={fieldName} />
-      </PopoverContent>
+      <Portal>
+        <PopoverContent p={2} w={256}>
+          <Content nodeId={nodeId} fieldName={fieldName} />
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx
index e2366e4cdd2..10609fbc267 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/AutoLayoutPopover.tsx
@@ -13,6 +13,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   Select,
 } from '@invoke-ai/ui-library';
 import { useReactFlow } from '@xyflow/react';
@@ -120,74 +121,82 @@ export const AutoLayoutPopover = memo(() => {
           onClick={popover.toggle}
         />
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
+      <Portal>
+        <PopoverContent>
+          <PopoverArrow />
 
-        <PopoverBody>
-          <Flex direction="column" gap={2}>
-            <FormControl>
-              <FormLabel>{t('nodes.layout.layoutDirection')}</FormLabel>
-              <Select size="sm" value={layoutDirection} onChange={handleLayoutDirectionChanged}>
-                <option value="LR">{t('nodes.layout.layoutDirectionRight')}</option>
-                <option value="TB">{t('nodes.layout.layoutDirectionDown')}</option>
-              </Select>
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('nodes.layout.layeringStrategy')}</FormLabel>
-              <Select size="sm" value={layeringStrategy} onChange={handleLayeringStrategyChanged}>
-                <option value="network-simplex">{t('nodes.layout.networkSimplex')}</option>
-                <option value="longest-path">{t('nodes.layout.longestPath')}</option>
-              </Select>
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('nodes.layout.alignment')}</FormLabel>
-              <Select size="sm" value={nodeAlignment} onChange={handleNodeAlignmentChanged}>
-                <option value="UL">{t('nodes.layout.alignmentUL')}</option>
-                <option value="DL">{t('nodes.layout.alignmentDL')}</option>
-                <option value="UR">{t('nodes.layout.alignmentUR')}</option>
-                <option value="DR">{t('nodes.layout.alignmentDR')}</option>
-              </Select>
-            </FormControl>
-            <Divider />
-            <FormControl>
-              <FormLabel>{t('nodes.layout.nodeSpacing')}</FormLabel>
-              <Grid w="full" gap={2} templateColumns="1fr auto">
-                <CompositeSlider min={0} max={200} value={nodeSpacing} onChange={handleNodeSpacingSliderChange} marks />
-                <CompositeNumberInput
-                  value={nodeSpacing}
-                  min={0}
-                  max={200}
-                  onChange={handleNodeSpacingInputChange}
-                  w={24}
-                />
-              </Grid>
-            </FormControl>
-            <FormControl>
-              <FormLabel>{t('nodes.layout.layerSpacing')}</FormLabel>
-              <Grid w="full" gap={2} templateColumns="1fr auto">
-                <CompositeSlider
-                  min={0}
-                  max={200}
-                  value={layerSpacing}
-                  onChange={handleLayerSpacingSliderChange}
-                  marks
-                />
-                <CompositeNumberInput
-                  value={layerSpacing}
-                  min={0}
-                  max={200}
-                  onChange={handleLayerSpacingInputChange}
-                  w={24}
-                />
-              </Grid>
-            </FormControl>
-            <Divider />
-            <Button w="full" onClick={handleApplyAutoLayout}>
-              {t('common.apply')}
-            </Button>
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
+          <PopoverBody>
+            <Flex direction="column" gap={2}>
+              <FormControl>
+                <FormLabel>{t('nodes.layout.layoutDirection')}</FormLabel>
+                <Select size="sm" value={layoutDirection} onChange={handleLayoutDirectionChanged}>
+                  <option value="LR">{t('nodes.layout.layoutDirectionRight')}</option>
+                  <option value="TB">{t('nodes.layout.layoutDirectionDown')}</option>
+                </Select>
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('nodes.layout.layeringStrategy')}</FormLabel>
+                <Select size="sm" value={layeringStrategy} onChange={handleLayeringStrategyChanged}>
+                  <option value="network-simplex">{t('nodes.layout.networkSimplex')}</option>
+                  <option value="longest-path">{t('nodes.layout.longestPath')}</option>
+                </Select>
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('nodes.layout.alignment')}</FormLabel>
+                <Select size="sm" value={nodeAlignment} onChange={handleNodeAlignmentChanged}>
+                  <option value="UL">{t('nodes.layout.alignmentUL')}</option>
+                  <option value="DL">{t('nodes.layout.alignmentDL')}</option>
+                  <option value="UR">{t('nodes.layout.alignmentUR')}</option>
+                  <option value="DR">{t('nodes.layout.alignmentDR')}</option>
+                </Select>
+              </FormControl>
+              <Divider />
+              <FormControl>
+                <FormLabel>{t('nodes.layout.nodeSpacing')}</FormLabel>
+                <Grid w="full" gap={2} templateColumns="1fr auto">
+                  <CompositeSlider
+                    min={0}
+                    max={200}
+                    value={nodeSpacing}
+                    onChange={handleNodeSpacingSliderChange}
+                    marks
+                  />
+                  <CompositeNumberInput
+                    value={nodeSpacing}
+                    min={0}
+                    max={200}
+                    onChange={handleNodeSpacingInputChange}
+                    w={24}
+                  />
+                </Grid>
+              </FormControl>
+              <FormControl>
+                <FormLabel>{t('nodes.layout.layerSpacing')}</FormLabel>
+                <Grid w="full" gap={2} templateColumns="1fr auto">
+                  <CompositeSlider
+                    min={0}
+                    max={200}
+                    value={layerSpacing}
+                    onChange={handleLayerSpacingSliderChange}
+                    marks
+                  />
+                  <CompositeNumberInput
+                    value={layerSpacing}
+                    min={0}
+                    max={200}
+                    onChange={handleLayerSpacingInputChange}
+                    w={24}
+                  />
+                </Grid>
+              </FormControl>
+              <Divider />
+              <Button w="full" onClick={handleApplyAutoLayout}>
+                {t('common.apply')}
+              </Button>
+            </Flex>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx
index 2eb68b4b6b1..0a98817bffe 100644
--- a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx
@@ -6,6 +6,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   Text,
   useDisclosure,
 } from '@invoke-ai/ui-library';
@@ -52,21 +53,23 @@ export const PostProcessingPopover = memo((props: Props) => {
           isDisabled={isDisabled}
         />
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverBody w={96}>
-          <Flex flexDirection="column" gap={4}>
-            <ParamPostProcessingModel />
-            {!postProcessingModel && <MissingModelWarning />}
-            <Button
-              size="sm"
-              isDisabled={isDisabled || !imageDTO || inProgress || !postProcessingModel}
-              onClick={handleClickUpscale}
-            >
-              {t('parameters.processImage')}
-            </Button>
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverBody w={96}>
+            <Flex flexDirection="column" gap={4}>
+              <ParamPostProcessingModel />
+              {!postProcessingModel && <MissingModelWarning />}
+              <Button
+                size="sm"
+                isDisabled={isDisabled || !imageDTO || inProgress || !postProcessingModel}
+                onClick={handleClickUpscale}
+              >
+                {t('parameters.processImage')}
+              </Button>
+            </Flex>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/prompt/PromptPopover.tsx b/invokeai/frontend/web/src/features/prompt/PromptPopover.tsx
index 685df7ae738..a9d21cd909f 100644
--- a/invokeai/frontend/web/src/features/prompt/PromptPopover.tsx
+++ b/invokeai/frontend/web/src/features/prompt/PromptPopover.tsx
@@ -1,4 +1,4 @@
-import { Popover, PopoverAnchor, PopoverBody, PopoverContent } from '@invoke-ai/ui-library';
+import { Popover, PopoverAnchor, PopoverBody, PopoverContent, Portal } from '@invoke-ai/ui-library';
 import { PromptTriggerSelect } from 'features/prompt/PromptTriggerSelect';
 import type { PromptPopoverProps } from 'features/prompt/types';
 import { memo } from 'react';
@@ -18,18 +18,20 @@ export const PromptPopover = memo((props: PromptPopoverProps) => {
       isLazy
     >
       <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent
-        p={0}
-        insetBlockStart={-1}
-        shadow="dark-lg"
-        borderColor="invokeBlue.300"
-        borderWidth="2px"
-        borderStyle="solid"
-      >
-        <PopoverBody p={0} width={`calc(${width}px - 0.25rem)`}>
-          <PromptTriggerSelect onClose={onClose} onSelect={onSelect} />
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent
+          p={0}
+          insetBlockStart={-1}
+          shadow="dark-lg"
+          borderColor="invokeBlue.300"
+          borderWidth="2px"
+          borderStyle="solid"
+        >
+          <PopoverBody p={0} width={`calc(${width}px - 0.25rem)`}>
+            <PromptTriggerSelect onClose={onClose} onSelect={onSelect} />
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 });
diff --git a/invokeai/frontend/web/src/features/ui/components/Notifications.tsx b/invokeai/frontend/web/src/features/ui/components/Notifications.tsx
index ca11e3ce210..8a08b5086db 100644
--- a/invokeai/frontend/web/src/features/ui/components/Notifications.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/Notifications.tsx
@@ -9,6 +9,7 @@ import {
   PopoverContent,
   PopoverHeader,
   PopoverTrigger,
+  Portal,
   Text,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
@@ -54,25 +55,27 @@ export const Notifications = () => {
           />
         </Flex>
       </PopoverTrigger>
-      <PopoverContent p={2}>
-        <PopoverArrow />
-        <PopoverCloseButton />
-        <PopoverHeader fontSize="md" fontWeight="semibold" pt={5}>
-          <Flex alignItems="center" gap={3}>
-            <Image src={InvokeSymbol} boxSize={6} />
-            {t('whatsNew.whatsNewInInvoke')}
-            {!!data.version.length &&
-              (isLocal ? (
-                <Text variant="subtext">{`v${data.version}`}</Text>
-              ) : (
-                <Text variant="subtext">{data.version}</Text>
-              ))}
-          </Flex>
-        </PopoverHeader>
-        <PopoverBody p={2} maxW={300}>
-          <WhatsNew />
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent p={2}>
+          <PopoverArrow />
+          <PopoverCloseButton />
+          <PopoverHeader fontSize="md" fontWeight="semibold" pt={5}>
+            <Flex alignItems="center" gap={3}>
+              <Image src={InvokeSymbol} boxSize={6} />
+              {t('whatsNew.whatsNewInInvoke')}
+              {!!data.version.length &&
+                (isLocal ? (
+                  <Text variant="subtext">{`v${data.version}`}</Text>
+                ) : (
+                  <Text variant="subtext">{data.version}</Text>
+                ))}
+            </Flex>
+          </PopoverHeader>
+          <PopoverBody p={2} maxW={300}>
+            <WhatsNew />
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 };