diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx index d6332aef..101ea6c4 100644 --- a/src/components/common/Modal/Modal.tsx +++ b/src/components/common/Modal/Modal.tsx @@ -6,7 +6,7 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden'; import { cn } from '@/utils/components'; export type ModalVariant = 'standard' | 'compact' | 'custom'; -export type ModalZIndex = 'base' | 'process' | 'selection' | 'settings' | 'custom'; +export type ModalZIndex = 'base' | 'process' | 'selection' | 'settings' | 'top' | 'custom'; type ModalProps = { isOpen: boolean; @@ -28,6 +28,7 @@ const Z_INDEX_MAP: Record = process: { wrapper: 'z-[2600]', backdrop: 'z-[2590]' }, settings: { wrapper: 'z-[3000]', backdrop: 'z-[2990]' }, selection: { wrapper: 'z-[3200]', backdrop: 'z-[3190]' }, + top: { wrapper: 'z-[3400]', backdrop: 'z-[3390]' }, custom: { wrapper: '', backdrop: '' }, }; diff --git a/src/features/markets/components/market-selection-modal.tsx b/src/features/markets/components/market-selection-modal.tsx index ac2aea57..0057a7f8 100644 --- a/src/features/markets/components/market-selection-modal.tsx +++ b/src/features/markets/components/market-selection-modal.tsx @@ -131,6 +131,7 @@ export function MarketSelectionModal({ disabled={false} uniqueCollateralTokens={undefined} showSelectColumn={multiSelect} + filterZIndex="top" /> )} diff --git a/src/features/markets/components/market-settings-modal.tsx b/src/features/markets/components/market-settings-modal.tsx index 145fe5f3..1ea1f523 100644 --- a/src/features/markets/components/market-settings-modal.tsx +++ b/src/features/markets/components/market-settings-modal.tsx @@ -3,7 +3,7 @@ import { FiSliders } from 'react-icons/fi'; import { Button } from '@/components/ui/button'; import { IconSwitch } from '@/components/ui/icon-switch'; import { Input } from '@/components/ui/input'; -import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal'; +import { Modal, ModalBody, ModalHeader, type ModalZIndex } from '@/components/common/Modal'; import { useRateLabel } from '@/hooks/useRateLabel'; import { useMarketPreferences } from '@/stores/useMarketPreferences'; import { COLUMN_DESCRIPTIONS, COLUMN_LABELS, DEFAULT_COLUMN_VISIBILITY, type ColumnVisibility } from './column-visibility'; @@ -11,6 +11,7 @@ import { COLUMN_DESCRIPTIONS, COLUMN_LABELS, DEFAULT_COLUMN_VISIBILITY, type Col type MarketSettingsModalProps = { isOpen: boolean; onOpenChange: (isOpen: boolean) => void; + zIndex?: ModalZIndex; }; type SettingItemProps = { @@ -31,7 +32,7 @@ function SettingItem({ title, description, children }: SettingItemProps) { ); } -export default function MarketSettingsModal({ isOpen, onOpenChange }: MarketSettingsModalProps) { +export default function MarketSettingsModal({ isOpen, onOpenChange, zIndex = 'settings' }: MarketSettingsModalProps) { const { columnVisibility, setColumnVisibility, entriesPerPage, setEntriesPerPage } = useMarketPreferences(); const { short: rateShort } = useRateLabel(); @@ -67,7 +68,7 @@ export default function MarketSettingsModal({ isOpen, onOpenChange }: MarketSett onOpenChange={onOpenChange} backdrop="blur" size="md" - zIndex="settings" + zIndex={zIndex} > {(onClose) => ( <> diff --git a/src/features/markets/components/markets-table-same-loan.tsx b/src/features/markets/components/markets-table-same-loan.tsx index 88f4323d..cd78aa07 100644 --- a/src/features/markets/components/markets-table-same-loan.tsx +++ b/src/features/markets/components/markets-table-same-loan.tsx @@ -7,6 +7,7 @@ import EmptyScreen from '@/components/status/empty-screen'; import AssetFilter from '@/features/markets/components/filters/asset-filter'; import OracleFilter from '@/features/markets/components/filters/oracle-filter'; import { MarketFilter } from '@/features/positions/components/markets-filter-compact'; +import type { ModalZIndex } from '@/components/common/Modal'; import { ClearFiltersButton } from '@/components/shared/clear-filters-button'; import { TablePagination } from '@/components/shared/table-pagination'; import { useTokensQuery } from '@/hooks/queries/useTokensQuery'; @@ -53,6 +54,8 @@ type MarketsTableWithSameLoanAssetProps = { uniqueCollateralTokens?: ERC20Token[]; // Optional: Hide the select column (useful for single-select mode) showSelectColumn?: boolean; + // Optional: Override z-index for filter modal (use 'top' when inside another modal) + filterZIndex?: ModalZIndex; }; enum SortColumn { @@ -309,6 +312,7 @@ export function MarketsTableWithSameLoanAsset({ disabled = false, uniqueCollateralTokens, showSelectColumn = true, + filterZIndex, }: MarketsTableWithSameLoanAssetProps): JSX.Element { // Get global market settings const { showUnwhitelistedMarkets, isAprDisplay } = useAppSettings(); @@ -593,11 +597,11 @@ export function MarketsTableWithSameLoanAsset({ /> {hasActiveFilters && }
- +