diff --git a/frontend/src/core/components/shared/DropdownListWithFooter.tsx b/frontend/src/core/components/shared/DropdownListWithFooter.tsx index 368b2255e..b5e5a9f5d 100644 --- a/frontend/src/core/components/shared/DropdownListWithFooter.tsx +++ b/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 = ({ @@ -56,7 +59,9 @@ const DropdownListWithFooter: React.FC = ({ 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 = ({ withArrow={withArrow} shadow="md" onClose={() => searchable && setSearchTerm('')} + withinPortal={withinPortal} + zIndex={zIndex} > @@ -58,6 +60,7 @@ const AddPageNumbersAppearanceSettings = ({ { value: 'Courier', label: 'Courier New' }, ]} disabled={disabled} + comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }} /> diff --git a/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx b/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx index e0aa7dfc7..bc046372c 100644 --- a/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx +++ b/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 }} /> diff --git a/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx b/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx index 058b38bc4..e7f67494d 100644 --- a/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx +++ b/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 }} /> )} diff --git a/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx b/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx index ac53a9a5a..17b8732c4 100644 --- a/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx +++ b/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 }} /> )} diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx index b4a1dcd3d..e0aa22a7b 100644 --- a/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx +++ b/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 }} /> @@ -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 }} /> diff --git a/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx b/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx index 104be7faa..5e2e0aa78 100644 --- a/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx +++ b/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 }} /> ); diff --git a/frontend/src/core/components/tools/automate/IconSelector.tsx b/frontend/src/core/components/tools/automate/IconSelector.tsx index 3b7733cf0..0bfcd01d8 100644 --- a/frontend/src/core/components/tools/automate/IconSelector.tsx +++ b/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} >