fix(automation): add zIndex and withinPortal props to dropdown components for improved UI consistency (#5527)

# Description of Changes
Closes: #5525
Closes: #5242


<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [X] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [X] I have performed a self-review of my own code
- [X] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [X] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>

frontend/src/core/components/shared/DropdownListWithFooter.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useState, useMemo } from 'react';
 import { Stack, Text, Popover, Box, Checkbox, Group, TextInput } from '@mantine/core';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import SearchIcon from '@mui/icons-material/Search';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
 
 export interface DropdownItem {
   value: string;
@@ -38,6 +39,8 @@ export interface DropdownListWithFooterProps {
   position?: 'top' | 'bottom' | 'left' | 'right';
   withArrow?: boolean;
   width?: 'target' | number;
+  withinPortal?: boolean;
+  zIndex?: number;
 }
 
 const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
@@ -56,7 +59,9 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
   dropdownClassName = '',
   position = 'bottom',
   withArrow = false,
-  width = 'target'
+  width = 'target',
+  withinPortal = true,
+  zIndex = Z_INDEX_AUTOMATE_DROPDOWN
 }) => {
   
   const [searchTerm, setSearchTerm] = useState('');
@@ -114,6 +119,8 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
         withArrow={withArrow} 
         shadow="md"
         onClose={() => searchable && setSearchTerm('')}
+        withinPortal={withinPortal}
+        zIndex={zIndex}
       >
         <Popover.Target>
           <Box

frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx

@@ -6,6 +6,7 @@ import { Stack, Select, TextInput, NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddPageNumbersParameters } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters";
 import { Tooltip } from "@app/components/shared/Tooltip";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface AddPageNumbersAppearanceSettingsProps {
   parameters: AddPageNumbersParameters;
@@ -34,6 +35,7 @@ const AddPageNumbersAppearanceSettings = ({
             { value: 'x-large', label: t('sizes.x-large', 'Extra Large') },
           ]}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Tooltip>
 
@@ -58,6 +60,7 @@ const AddPageNumbersAppearanceSettings = ({
             { value: 'Courier', label: 'Courier New' },
           ]}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Tooltip>
 

frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx

@@ -1,6 +1,7 @@
 import { Stack, PasswordInput, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddPasswordParameters } from "@app/hooks/tools/addPassword/useAddPasswordParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface AddPasswordSettingsProps {
   parameters: AddPasswordParameters;
@@ -47,6 +48,7 @@ const AddPasswordSettings = ({ parameters, onParameterChange, disabled = false }
             { value: '128', label: t('addPassword.encryption.keyLength.128bit', '128-bit (Standard)') },
             { value: '256', label: t('addPassword.encryption.keyLength.256bit', '256-bit (High)') }
           ]}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
 

frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx

@@ -4,6 +4,7 @@ import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampPa
 import LocalIcon from "@app/components/shared/LocalIcon";
 import styles from "@app/components/tools/addStamp/StampPreview.module.css";
 import { Tooltip } from "@app/components/shared/Tooltip";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface StampPositionFormattingSettingsProps {
   parameters: AddStampParameters;
@@ -176,6 +177,7 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
           onChange={(value) => onParameterChange('customColor', value)}
           format="hex"
           disabled={disabled}
+          popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       )}
 
@@ -192,6 +194,7 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
             { value: 'x-large', label: t('margin.xLarge', 'Extra Large') },
           ]}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       )}
     </Stack>

frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx

@@ -4,6 +4,7 @@ import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampPa
 import ButtonSelector from "@app/components/shared/ButtonSelector";
 import styles from "@app/components/tools/addStamp/StampPreview.module.css";
 import { getDefaultFontSizeForAlphabet } from "@app/components/tools/addStamp/StampPreviewUtils";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface StampSetupSettingsProps {
   parameters: AddStampParameters;
@@ -66,6 +67,7 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false }:
               { value: 'thai', label: 'ไทย' },
             ]}
             disabled={disabled}
+            comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
           />
         </>
       )}

frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx

@@ -2,6 +2,7 @@ import { Stack, Text, Select, ColorInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
 import { alphabetOptions } from "@app/constants/addWatermarkConstants";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface WatermarkTextStyleProps {
   parameters: AddWatermarkParameters;
@@ -24,6 +25,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
           onChange={(value) => onParameterChange("customColor", value)}
           disabled={disabled}
           format="hex"
+          popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
 
@@ -36,6 +38,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
           onChange={(value) => value && onParameterChange("alphabet", value)}
           data={alphabetOptions}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
     </Stack>

frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx

@@ -1,6 +1,7 @@
 import { Stack, NumberInput, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AdjustPageScaleParameters, PageSize } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface AdjustPageScaleSettingsProps {
   parameters: AdjustPageScaleParameters;
@@ -47,6 +48,7 @@ const AdjustPageScaleSettings = ({ parameters, onParameterChange, disabled = fal
         }}
         data={pageSizeOptions}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
     </Stack>
   );

frontend/src/core/components/tools/automate/IconSelector.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Box, Text, Stack, Button, SimpleGrid, Tooltip, Popover } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { iconMap, iconOptions } from '@app/components/tools/automate/iconMap';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
 
 interface IconSelectorProps {
   value?: string;
@@ -36,6 +37,8 @@ export default function IconSelector({ value = "SettingsIcon", onChange, size =
         position="bottom-start"
         withArrow
         trapFocus
+        withinPortal
+        zIndex={Z_INDEX_AUTOMATE_DROPDOWN}
       >
         <Popover.Target>
           <Button

frontend/src/core/components/tools/automate/ToolSelector.tsx

@@ -7,6 +7,7 @@ import { renderToolButtons } from '@app/components/tools/shared/renderToolButton
 import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
 import ToolButton from '@app/components/tools/toolPicker/ToolButton';
 import { ToolId } from '@app/types/toolId';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
 
 interface ToolSelectorProps {
   onSelect: (toolKey: string) => void;
@@ -188,7 +189,7 @@ export default function ToolSelector({
             top: '100%',
             left: 0,
             right: 0,
-            zIndex: 1000,
+            zIndex: Z_INDEX_AUTOMATE_DROPDOWN,
             backgroundColor: 'var(--mantine-color-body)',
             border: '1px solid var(--mantine-color-gray-3)',
             borderRadius: 'var(--mantine-radius-sm)',

frontend/src/core/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { TrappedStatus } from "@app/types/metadata";
 import CustomMetadataStep from "@app/components/tools/changeMetadata/steps/CustomMetadataStep";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface AdvancedOptionsStepProps {
   parameters: ChangeMetadataParameters;
@@ -40,6 +41,7 @@ const AdvancedOptionsStep = ({
           { value: TrappedStatus.TRUE, label: t('changeMetadata.trapped.true', 'True') },
           { value: TrappedStatus.FALSE, label: t('changeMetadata.trapped.false', 'False') }
         ]}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       <Divider />

frontend/src/core/components/tools/compress/CompressSettings.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
 import apiClient from "@app/services/apiClient";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface CompressSettingsProps {
   parameters: CompressParameters;
@@ -96,6 +97,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
                 { value: 'MB', label: 'MB' }
               ]}
               style={{ width: '80px' }}
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
             />
           </div>
         </Stack>

frontend/src/core/components/tools/convert/ConvertFromImageSettings.tsx

@@ -2,6 +2,7 @@ import { Stack, Text, Select, Switch } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { COLOR_TYPES, FIT_OPTIONS } from "@app/constants/convertConstants";
 import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ConvertFromImageSettingsProps {
   parameters: ConvertParameters;
@@ -33,6 +34,7 @@ const ConvertFromImageSettings = ({
           { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
         ]}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       <Select
@@ -49,6 +51,7 @@ const ConvertFromImageSettings = ({
           { value: FIT_OPTIONS.FILL_PAGE, label: t("convert.fillPage", "Fill Page") },
         ]}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       <Switch

frontend/src/core/components/tools/convert/ConvertToEpubSettings.tsx

@@ -1,6 +1,7 @@
 import { Stack, Select, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ConvertToEpubSettingsProps {
   parameters: ConvertParameters;
@@ -83,6 +84,7 @@ const ConvertToEpubSettings = ({
             label: t("convert.epubOptions.kindleEink", "Kindle e-Ink (text optimized)") 
           }
         ]}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       <Select
@@ -95,6 +97,7 @@ const ConvertToEpubSettings = ({
           { value: 'EPUB', label: 'EPUB' },
           { value: 'AZW3', label: 'AZW3' }
         ]}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
     </Stack>
   );

frontend/src/core/components/tools/convert/ConvertToImageSettings.tsx

@@ -2,6 +2,7 @@ import { Stack, Text, Select, NumberInput, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { COLOR_TYPES, OUTPUT_OPTIONS } from "@app/constants/convertConstants";
 import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ConvertToImageSettingsProps {
   parameters: ConvertParameters;
@@ -34,6 +35,7 @@ const ConvertToImageSettings = ({
             { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
           ]}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
         <NumberInput
           data-testid="dpi-input"
@@ -62,6 +64,7 @@ const ConvertToImageSettings = ({
           { value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
         ]}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
     </Stack>
   );

frontend/src/core/components/tools/convert/ConvertToPdfaSettings.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
 import { usePdfSignatureDetection } from '@app/hooks/usePdfSignatureDetection';
 import { StirlingFile } from '@app/types/fileContext';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ConvertToPdfaSettingsProps {
   parameters: ConvertParameters;
@@ -49,6 +50,7 @@ const ConvertToPdfaSettings = ({
           data={pdfaFormatOptions}
           disabled={disabled || isChecking}
           data-testid="pdfa-output-format-select"
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
         <Text size="xs" c="dimmed">
           {t("convert.pdfaNote", "PDF/A-1b is more compatible, PDF/A-2b supports more features, PDF/A-3b supports embedded files.")}

frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo } from "react";
 import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface FormatOption {
   value: string;
@@ -17,6 +18,8 @@ interface GroupedFormatDropdownProps {
   disabled?: boolean;
   minWidth?: string;
   name?: string;
+  withinPortal?: boolean;
+  zIndex?: number;
 }
 
 const GroupedFormatDropdown = ({
@@ -26,7 +29,9 @@ const GroupedFormatDropdown = ({
   onChange,
   disabled = false,
   minWidth = "18.75rem",
-  name
+  name,
+  withinPortal = true,
+  zIndex = Z_INDEX_AUTOMATE_DROPDOWN
 }: GroupedFormatDropdownProps) => {
   const [dropdownOpened, setDropdownOpened] = useState(false);
   const theme = useMantineTheme();
@@ -66,6 +71,8 @@ const GroupedFormatDropdown = ({
       disabled={disabled}
       closeOnEscape={true}
       trapFocus
+      withinPortal={withinPortal}
+      zIndex={zIndex}
     >
       <Popover.Target>
         <UnstyledButton

frontend/src/core/components/tools/extractImages/ExtractImagesSettings.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Stack, Select, Checkbox } from '@mantine/core';
 import { ExtractImagesParameters } from '@app/hooks/tools/extractImages/useExtractImagesParameters';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ExtractImagesSettingsProps {
   parameters: ExtractImagesParameters;
@@ -31,6 +32,7 @@ const ExtractImagesSettings = ({
           { value: 'gif', label: 'GIF' },
         ]}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       <Checkbox

frontend/src/core/components/tools/merge/MergeFileSorter.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import SortIcon from '@mui/icons-material/Sort';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface MergeFileSorterProps {
   onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void;
@@ -46,6 +47,7 @@ const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
             label={t('merge.sortBy.label', 'Sort By')}
             size='xs'
             style={{ flex: 1 }}
+            comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
           />
 
           <ActionIcon

frontend/src/core/components/tools/ocr/OCRSettings.tsx

@@ -3,6 +3,7 @@ import { Stack, Select, Divider } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import LanguagePicker from '@app/components/tools/ocr/LanguagePicker';
 import { OCRParameters } from '@app/hooks/tools/ocr/useOCRParameters';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
 
 interface OCRSettingsProps {
   parameters: OCRParameters;
@@ -30,6 +31,7 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
           { value: 'Normal', label: t('ocr.settings.ocrMode.strict', 'Strict (abort if text found)') },
         ]}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       <Divider />

frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.tsx

@@ -4,6 +4,7 @@ import { type OverlayPdfsParameters, type OverlayMode } from '@app/hooks/tools/o
 import LocalIcon from '@app/components/shared/LocalIcon';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
 import styles from '@app/components/tools/overlayPdfs/OverlayPdfsSettings.module.css';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface OverlayPdfsSettingsProps {
   parameters: OverlayPdfsParameters;
@@ -56,6 +57,7 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
           value={parameters.overlayMode}
           onChange={(v) => handleModeChange((v || 'SequentialOverlay') as OverlayMode)}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
 

frontend/src/core/components/tools/pageLayout/PageLayoutSettings.tsx

@@ -2,6 +2,7 @@ import { Divider, Select, Stack, Switch } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
 import { getPagesPerSheetOptions } from '@app/components/tools/pageLayout/constants';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 export default function PageLayoutSettings({
   parameters,
@@ -28,6 +29,7 @@ export default function PageLayoutSettings({
         value={String(parameters.pagesPerSheet)}
         onChange={(v) => onParameterChange('pagesPerSheet', Number(v))}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       {selected && (

frontend/src/core/components/tools/redact/RedactAdvancedSettings.tsx

@@ -1,6 +1,7 @@
 import { Stack, NumberInput, ColorInput, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { RedactParameters } from "@app/hooks/tools/redact/useRedactParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface RedactAdvancedSettingsProps {
   parameters: RedactParameters;
@@ -21,6 +22,7 @@ const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = fals
         disabled={disabled}
         size="sm"
         format="hex"
+        popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       {/* Box Padding */}

frontend/src/core/components/tools/reorganizePages/ReorganizePagesSettings.tsx

@@ -2,6 +2,7 @@ import { Divider, Select, Stack, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ReorganizePagesParameters } from '@app/hooks/tools/reorganizePages/useReorganizePagesParameters';
 import { getReorganizePagesModeData } from '@app/components/tools/reorganizePages/constants';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
 
 export default function ReorganizePagesSettings({
   parameters,
@@ -28,6 +29,7 @@ export default function ReorganizePagesSettings({
         value={parameters.customMode}
         onChange={(v) => onParameterChange('customMode', v ?? '')}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
       {selectedMode && (
         <div

frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx

@@ -1,6 +1,7 @@
 import { Stack, Text, Select, ColorInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ReplaceColorParameters } from "@app/hooks/tools/replaceColor/useReplaceColorParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ReplaceColorSettingsProps {
   parameters: ReplaceColorParameters;
@@ -60,6 +61,7 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
           onChange={(value) => value && onParameterChange('replaceAndInvertOption', value as ReplaceColorParameters['replaceAndInvertOption'])}
           data={replaceAndInvertOptions}
           disabled={disabled}
+          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
 
@@ -73,6 +75,7 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
             onChange={(value) => value && onParameterChange('highContrastColorCombination', value as ReplaceColorParameters['highContrastColorCombination'])}
             data={highContrastOptions}
             disabled={disabled}
+            comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
           />
         </Stack>
       )}
@@ -88,6 +91,7 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
               onChange={(value) => onParameterChange('textColor', value)}
               format="hex"
               disabled={disabled}
+              popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
             />
           </Stack>
 
@@ -100,6 +104,7 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
               onChange={(value) => onParameterChange('backGroundColor', value)}
               format="hex"
               disabled={disabled}
+              popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
             />
           </Stack>
         </>

frontend/src/core/components/tools/split/SplitAutomationSettings.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import { SplitParameters } from "@app/hooks/tools/split/useSplitParameters";
 import { METHOD_OPTIONS, SplitMethod } from "@app/constants/splitConstants";
 import SplitSettings from "@app/components/tools/split/SplitSettings";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface SplitAutomationSettingsProps {
   parameters: SplitParameters;
@@ -40,6 +41,7 @@ const SplitAutomationSettings = ({ parameters, onParameterChange, disabled = fal
         onChange={(value) => onParameterChange('method', value as (SplitMethod | '') || '')}
         data={methodSelectOptions}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
 
       {/* Method-Specific Settings */}

frontend/src/core/components/tools/split/SplitSettings.tsx

@@ -3,6 +3,7 @@ import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { SPLIT_METHODS } from '@app/constants/splitConstants';
 import { SplitParameters } from '@app/hooks/tools/split/useSplitParameters';
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 export interface SplitSettingsProps {
   parameters: SplitParameters;
@@ -62,6 +63,7 @@ const SplitSettings = ({
           { value: 'CUSTOM', label: t("split-by-sections.splitMode.custom", "Custom pages") },
         ]}
         disabled={disabled}
+        comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
       {parameters.splitMode === 'CUSTOM' && (
         <TextInput

frontend/src/core/styles/zIndex.ts

@@ -11,6 +11,8 @@ export const Z_INDEX_FILE_MANAGER_MODAL = 1200;
 export const Z_INDEX_OVER_FILE_MANAGER_MODAL = 1300;
 
 export const Z_INDEX_AUTOMATE_MODAL = 1100;
+// Dropdowns/Popovers inside automation modals need to be above the modal
+export const Z_INDEX_AUTOMATE_DROPDOWN = 1200;
 
 // page editor Zindexes
 export const Z_INDEX_HOVER_ACTION_MENU = 100;