fix: add market filter to rebalance market selection modal

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<ModalZIndex, { wrapper: string; backdrop: string }> =
   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: '' },
 };
 

src/features/markets/components/market-selection-modal.tsx

@@ -131,6 +131,7 @@ export function MarketSelectionModal({
             disabled={false}
             uniqueCollateralTokens={undefined}
             showSelectColumn={multiSelect}
+            filterZIndex="top"
           />
         )}
       </ModalBody>

src/features/markets/components/market-settings-modal.tsx

@@ -3,14 +3,15 @@ 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';
 
 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) => (
         <>

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 && <ClearFiltersButton onClick={clearAllFilters} />}
         <div className="flex items-center gap-2 sm:ml-auto">
-          <MarketFilter variant="button" />
+          <MarketFilter variant="button" zIndex={filterZIndex} />
           <Button
             variant="default"
             size="md"
-            onClick={() => openModal('marketSettings', {})}
+            onClick={() => openModal('marketSettings', filterZIndex ? { zIndex: 'top' } : {})}
             className="w-10 min-w-10 px-0"
             aria-label="Market settings"
           >

src/features/positions/components/markets-filter-compact.tsx

@@ -6,7 +6,7 @@ import { Divider } from '@/components/ui/divider';
 import { FilterRow, FilterSection } from '@/components/ui/filter-components';
 import { IconSwitch } from '@/components/ui/icon-switch';
 import { Tooltip } from '@/components/ui/tooltip';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@/components/common/Modal';
+import { Modal, ModalBody, ModalFooter, ModalHeader, type ModalZIndex } from '@/components/common/Modal';
 import { TooltipContent } from '@/components/shared/tooltip-content';
 import { MONARCH_PRIMARY } from '@/constants/chartColors';
 import { useDisclosure } from '@/hooks/useDisclosure';
@@ -21,11 +21,12 @@ import { parseNumericThreshold } from '@/utils/markets';
 type MarketFilterProps = {
   className?: string;
   variant?: 'ghost' | 'button';
+  zIndex?: ModalZIndex;
 };
 
 type DetailViewType = 'filter-thresholds' | 'trusted-vaults' | 'custom-tag-config';
 
-export function MarketFilter({ className, variant = 'ghost' }: MarketFilterProps) {
+export function MarketFilter({ className, variant = 'ghost', zIndex = 'settings' }: MarketFilterProps) {
   const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
   const { open: openModal } = useModal();
 
@@ -105,7 +106,7 @@ export function MarketFilter({ className, variant = 'ghost' }: MarketFilterProps
         onOpenChange={onOpenChange}
         size="md"
         backdrop="opaque"
-        zIndex="settings"
+        zIndex={zIndex}
       >
         {(close) => (
           <>

src/stores/useModalStore.ts

@@ -49,7 +49,9 @@ export type ModalProps = {
   };
 
   // Settings & Configuration
-  marketSettings: Record<string, never>; // No props needed - uses useMarketPreferences() store
+  marketSettings: {
+    zIndex?: 'settings' | 'top'; // Override z-index when opened from nested modals
+  };
 
   monarchSettings: {
     initialCategory?: 'transaction' | 'display' | 'filters' | 'preferences' | 'experimental';