move popover zIndex below modal zIndex

toolkit/chakra/select.tsx

@@ -234,10 +234,11 @@ export interface SelectProps extends SelectRootProps {
   portalled?: boolean;
   loading?: boolean;
   errorText?: string;
+  contentProps?: SelectContentProps;
 }
 
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
-  const { collection, placeholder, portalled = true, loading, errorText, ...rest } = props;
+  const { collection, placeholder, portalled = true, loading, errorText, contentProps, ...rest } = props;
   return (
     <SelectRoot
       ref={ ref }
@@ -253,7 +254,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref)
           errorText={ errorText }
         />
       </SelectControl>
-      <SelectContent portalled={ portalled }>
+      <SelectContent portalled={ portalled } { ...contentProps }>
         { collection.items.map((item: SelectOption) => (
           <SelectItem item={ item } key={ item.value }>
             { item.label }

toolkit/theme/foundations/zIndex.ts

@@ -3,14 +3,13 @@ export const zIndex = {
   auto: { value: 'auto' },
   base: { value: 0 },
   docked: { value: 10 },
-  dropdown: { value: 1000 },
   sticky: { value: 1100 },
   sticky1: { value: 1101 },
   sticky2: { value: 1102 },
+  popover: { value: 1150 },
   banner: { value: 1200 },
   overlay: { value: 1300 },
   modal: { value: 1400 },
-  popover: { value: 1500 },
   tooltip: { value: 1550 }, // otherwise tooltips will not be visible in modals
   tooltip2: { value: 1551 }, // for tooltips in tooltips
   skipLink: { value: 1600 },

toolkit/theme/recipes/menu.recipe.ts

@@ -9,7 +9,7 @@ export const recipe = defineSlotRecipe({
       boxShadow: 'popover',
       color: 'initial',
       maxHeight: 'var(--available-height)',
-      '--menu-z-index': 'zIndex.dropdown',
+      '--menu-z-index': 'zIndex.popover',
       zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
       borderRadius: 'md',
       overflow: 'hidden',

ui/marketplace/AppSecurityReport.tsx

@@ -12,6 +12,7 @@ import config from 'configs/app';
 import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import * as mixpanel from 'lib/mixpanel/index';
 import { Link } from 'toolkit/chakra/link';
+import type { PopoverContentProps } from 'toolkit/chakra/popover';
 import { PopoverBody, PopoverContent, PopoverRoot } from 'toolkit/chakra/popover';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import { apos } from 'toolkit/utils/htmlEntities';
@@ -30,10 +31,20 @@ type Props = {
   popoverPlacement?: 'bottom-start' | 'bottom-end' | 'left';
   buttonProps?: ButtonProps;
   triggerWrapperProps?: BoxProps;
+  popoverContentProps?: PopoverContentProps;
 };
 
 const AppSecurityReport = ({
-  id, securityReport, showContractList, isLoading, onlyIcon, source, triggerWrapperProps, buttonProps, popoverPlacement = 'bottom-start',
+  id,
+  securityReport,
+  showContractList,
+  isLoading,
+  onlyIcon,
+  source,
+  triggerWrapperProps,
+  buttonProps,
+  popoverPlacement = 'bottom-start',
+  popoverContentProps,
 }: Props) => {
 
   const { open, onOpenChange } = useDisclosure();
@@ -76,7 +87,7 @@ const AppSecurityReport = ({
         wrapperProps={ triggerWrapperProps }
         { ...buttonProps }
       />
-      <PopoverContent w={{ base: 'calc(100vw - 48px)', lg: '328px' }} mx={{ base: 3, lg: 0 }}>
+      <PopoverContent w={{ base: 'calc(100vw - 48px)', lg: '328px' }} mx={{ base: 3, lg: 0 }} { ...popoverContentProps }>
         <PopoverBody px="26px" py="20px" textStyle="sm">
           <Text fontWeight="500" textStyle="xs" mb={ 2 } color="text.secondary">Smart contracts info</Text>
           <Flex alignItems="center" justifyContent="space-between" py={ 1.5 }>

ui/marketplace/ContractListModal.tsx

@@ -58,7 +58,6 @@ const ContractListModal = ({ onClose, onBack, type, contracts }: Props) => {
       open={ Boolean(type) }
       onOpenChange={ handleOpenChange }
       size={{ lgDown: 'full', lg: 'md' }}
-      placement="center"
     >
       <DialogContent>
         <DialogHeader display="flex" alignItems="center" mb={ 4 } onBackToClick={ onBack }>

ui/marketplace/MarketplaceAppModal.tsx

@@ -135,7 +135,6 @@ const MarketplaceAppModal = ({
       open={ Boolean(data.id) }
       onOpenChange={ handleOpenChange }
       size={{ lgDown: 'full', lg: 'md' }}
-      placement="center"
     >
       <DialogContent>
         <Box
@@ -197,6 +196,7 @@ const MarketplaceAppModal = ({
                 fullView
                 canRate={ canRate }
                 source="App modal"
+                popoverContentProps={{ zIndex: 'modal' }}
               />
             </Box>
           ) }
@@ -265,6 +265,7 @@ const MarketplaceAppModal = ({
                   showContractList={ showContractList }
                   source="App modal"
                   popoverPlacement={ isMobile ? 'bottom-start' : 'left' }
+                  popoverContentProps={{ zIndex: 'modal' }}
                 />
               </Flex>
             </Flex>

ui/marketplace/MarketplaceDisclaimerModal.tsx

@@ -27,7 +27,6 @@ const MarketplaceDisclaimerModal = ({ isOpen, onClose, appId }: Props) => {
       open={ isOpen }
       onOpenChange={ onClose }
       size={ isMobile ? 'full' : 'md' }
-      placement="center"
     >
       <DialogContent>
         <DialogHeader>

ui/marketplace/Rating/Rating.tsx

@@ -5,6 +5,7 @@ import type { AppRating } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import type { PopoverContentProps } from 'toolkit/chakra/popover';
 import { PopoverBody, PopoverContent, PopoverRoot } from 'toolkit/chakra/popover';
 import { Rating } from 'toolkit/chakra/rating';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -26,11 +27,13 @@ type Props = {
   fullView?: boolean;
   canRate: boolean | undefined;
   source: EventPayload<EventTypes.APP_FEEDBACK>['Source'];
+  popoverContentProps?: PopoverContentProps;
 };
 
 const MarketplaceRating = ({
   appId, rating, userRating, rate,
   isSending, isLoading, fullView, canRate, source,
+  popoverContentProps,
 }: Props) => {
 
   if (!isEnabled) {
@@ -60,7 +63,7 @@ const MarketplaceRating = ({
           canRate={ canRate }
         />
         { canRate ? (
-          <PopoverContent w="250px">
+          <PopoverContent w="250px" { ...popoverContentProps }>
             <PopoverBody>
               <Content
                 appId={ appId }

ui/snippets/networkMenu/NetworkMenuContentMobile.tsx

@@ -58,6 +58,7 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
           collection={ selectCollection }
           placeholder="Select network type"
           mb={ 3 }
+          contentProps={{ zIndex: 'modal' }}
         />
       ) }
       <VStack as="ul" gap={ 2 } alignItems="stretch">