[TOOL-3571] Dashboard: Remove custom high z-indices (#6380)

MananTank · MananTank · commit b535cc816f25 · 2025-03-01T00:11:46.000Z
diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
@@ -77,10 +77,7 @@ export function DangerSettingCard(props: {
             </Button>
           </DialogTrigger>
 
-          <DialogContent
-            className="z-[10001] overflow-hidden p-0"
-            dialogOverlayClassName="z-[10000]"
-          >
+          <DialogContent className="overflow-hidden p-0">
             <DynamicHeight>
               <div className="p-6">
                 <DialogHeader className="pr-10">
diff --git a/apps/dashboard/src/@/components/blocks/multi-select.tsx b/apps/dashboard/src/@/components/blocks/multi-select.tsx
@@ -225,7 +225,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          className="z-[10001] p-0"
+          className="p-0"
           align="center"
           sideOffset={10}
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
diff --git a/apps/dashboard/src/@/components/blocks/select-with-search.tsx b/apps/dashboard/src/@/components/blocks/select-with-search.tsx
@@ -137,7 +137,7 @@ export const SelectWithSearch = React.forwardRef<
         </PopoverTrigger>
 
         <PopoverContent
-          className={cn("z-[10001] p-0", popoverContentClassName)}
+          className={cn("p-0", popoverContentClassName)}
           align={props.align || "center"}
           side={props.side}
           sideOffset={10}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx
@@ -133,7 +133,7 @@ export function ModuleCard(props: ModuleCardProps) {
         open={isUninstallModalOpen}
         onOpenChange={setIsUninstallModalOpen}
       >
-        <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
+        <DialogContent>
           <form
             onSubmit={(e) => {
               e.preventDefault();
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx
@@ -49,7 +49,7 @@ export const ProposalButton: React.FC<VoteButtonProps> = ({
           Create Proposal
         </Button>
       </SheetTrigger>
-      <SheetContent className="z-[10000] w-full sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
+      <SheetContent className="w-full sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
         <SheetHeader>
           <SheetTitle>Create new proposal</SheetTitle>
         </SheetHeader>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx
@@ -70,7 +70,7 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
           <Flame size={16} /> Burn
         </Button>
       </SheetTrigger>
-      <SheetContent className="z-[10000]">
+      <SheetContent>
         <SheetHeader>
           <SheetTitle className="text-left">Burn tokens</SheetTitle>
         </SheetHeader>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx
@@ -60,7 +60,7 @@ export const TokenClaimButton: React.FC<TokenClaimButtonProps> = ({
           <GemIcon size={16} /> Claim
         </Button>
       </SheetTrigger>
-      <SheetContent className="z-[10000]">
+      <SheetContent>
         <SheetHeader>
           <SheetTitle className="text-left">Claim tokens</SheetTitle>
         </SheetHeader>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx
@@ -58,7 +58,7 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
             <PlusIcon size={16} /> Mint
           </Button>
         </SheetTrigger>
-        <SheetContent className="z-[10000]">
+        <SheetContent>
           <SheetHeader>
             <SheetTitle className="text-left">
               Mint additional tokens
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx
@@ -64,7 +64,7 @@ export const TokenTransferButton: React.FC<TokenTransferButtonProps> = ({
           <SendIcon size={16} /> Transfer
         </Button>
       </SheetTrigger>
-      <SheetContent className="z-[10000]">
+      <SheetContent>
         <SheetHeader>
           <SheetTitle className="text-left">Transfer tokens</SheetTitle>
         </SheetHeader>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-modal.client.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/update-partner-modal.client.tsx
@@ -26,7 +26,7 @@ export function UpdatePartnerModal({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
+      <DialogContent>
         <DialogHeader className="mb-2">
           <DialogTitle>Update {partner.name}</DialogTitle>
         </DialogHeader>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx
@@ -132,10 +132,7 @@ const ChangeVersionModal = (props: {
     // Self-hosted modal: prompt to update manually.
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent
-          className="z-[10001] max-w-[400px]"
-          dialogOverlayClassName="z-[10000]"
-        >
+        <DialogContent className="max-w-[400px]">
           <DialogHeader>
             <DialogTitle className="mb-6 pr-4 font-semibold text-2xl tracking-tight">
               Update your self-hosted Engine
@@ -182,10 +179,7 @@ const ChangeVersionModal = (props: {
   // For cloud-hosted, prompt the user to select a version to update to.
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="z-[10001] max-w-[400px]"
-        dialogOverlayClassName="z-[10000]"
-      >
+      <DialogContent className="max-w-[400px]">
         <DialogHeader>
           <DialogTitle>Update Engine version</DialogTitle>
         </DialogHeader>
@@ -198,7 +192,7 @@ const ChangeVersionModal = (props: {
             <SelectTrigger>
               <SelectValue />
             </SelectTrigger>
-            <SelectContent className="z-[10001]">
+            <SelectContent>
               <SelectGroup>
                 {serverVersions.map(({ name, createdAt }, idx) => {
                   const isCurrentVersion = name === currentVersion;
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
@@ -91,10 +91,7 @@ export function EngineAlertDialogForm(props: {
 
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent
-        className="z-[10001] p-0"
-        dialogOverlayClassName="z-[10000]"
-      >
+      <DialogContent className="p-0">
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div className="p-6">
@@ -120,7 +117,7 @@ export function EngineAlertDialogForm(props: {
                           <SelectTrigger>
                             <SelectValue />
                           </SelectTrigger>
-                          <SelectContent className="z-[10001]">
+                          <SelectContent>
                             <SelectGroup>
                               {alertRuleOptions.map((option) => (
                                 <SelectItem
@@ -161,7 +158,7 @@ export function EngineAlertDialogForm(props: {
                           <SelectTrigger className="mt-1">
                             <SelectValue placeholder="Select Notification Type" />
                           </SelectTrigger>
-                          <SelectContent className="z-[10001]">
+                          <SelectContent>
                             <SelectGroup>
                               {Object.entries(
                                 EngineNotificationChannelTypeConfig,
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
@@ -129,10 +129,7 @@ export const CreateBackendWalletButton: React.FC<
         Create
       </Button>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent
-          className="z-[10001] overflow-hidden p-0"
-          dialogOverlayClassName="z-[10000]"
-        >
+        <DialogContent className="overflow-hidden p-0">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <div className="p-6">
@@ -162,7 +159,7 @@ export const CreateBackendWalletButton: React.FC<
                       <SelectTrigger>
                         <SelectValue />
                       </SelectTrigger>
-                      <SelectContent className="z-[10001]">
+                      <SelectContent>
                         <SelectGroup>
                           {walletTypeOptions.map((option) => (
                             <SelectItem key={option.key} value={option.key}>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
@@ -147,10 +147,7 @@ export const ImportBackendWalletButton: React.FC<
       </Button>
 
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent
-          className="z-[10001] p-0"
-          dialogOverlayClassName="z-[10000]"
-        >
+        <DialogContent className="p-0">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <div className="p-6">
@@ -175,7 +172,7 @@ export const ImportBackendWalletButton: React.FC<
                         <SelectTrigger>
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent className="z-[10001]">
+                        <SelectContent>
                           <SelectGroup>
                             {walletTypeOptions.map((option) => (
                               <SelectItem key={option.key} value={option.key}>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
@@ -67,10 +67,7 @@ export const CredentialForm = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="z-[10001] overflow-hidden p-0"
-        dialogOverlayClassName="z-[10000]"
-      >
+      <DialogContent className="overflow-hidden p-0">
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit((data) => {
@@ -114,7 +111,7 @@ export const CredentialForm = ({
                       <SelectTrigger className="bg-card">
                         <SelectValue />
                       </SelectTrigger>
-                      <SelectContent className="z-[10001]">
+                      <SelectContent>
                         <SelectGroup>
                           {CREDENTIAL_TYPE_OPTIONS.map((option) => (
                             <SelectItem key={option.value} value={option.value}>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/components/webhooks.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/components/webhooks.client.tsx
@@ -238,7 +238,7 @@ function CreateWebhookButton(props: PropsWithChildren<PayWebhooksPageProps>) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
-      <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
+      <DialogContent>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit((values) =>
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -214,11 +214,10 @@ export const MismatchButton = forwardRef<
       >
         <DialogContent
           className={cn(
-            "z-[10001] gap-0 p-0",
+            "gap-0 p-0",
             dialog === "no-funds" && "max-w-[480px]",
             dialog === "pay" && "max-w-[360px] border-none bg-transparent",
           )}
-          dialogOverlayClassName="z-[10000]"
           dialogCloseClassName="focus:ring-0"
         >
           <DynamicHeight>
diff --git a/apps/dashboard/src/components/cmd-k-search/index.tsx b/apps/dashboard/src/components/cmd-k-search/index.tsx
@@ -190,10 +190,7 @@ export const CmdKSearchModal = (props: {
         }
       }}
     >
-      <DialogContent
-        className="z-[10000001] gap-0 p-0"
-        dialogOverlayClassName="z-[10000000]"
-      >
+      <DialogContent className="gap-0 p-0">
         {/* Title */}
         <DynamicHeight>
           <div className="p-6">
diff --git a/apps/dashboard/src/components/configure-networks/ConfigureNetworkModal.tsx b/apps/dashboard/src/components/configure-networks/ConfigureNetworkModal.tsx
@@ -21,10 +21,7 @@ export const ConfigureNetworkModal: React.FC<ConfigureNetworkModalProps> = (
 
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent
-        className="z-[10001] max-w-[480px] p-0"
-        dialogOverlayClassName="z-[10000]"
-      >
+      <DialogContent className="max-w-[480px] p-0">
         <ConfigureNetworks
           onNetworkAdded={(chain) => {
             addRecentlyUsedChainId(chain.chainId);
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx
@@ -77,8 +77,7 @@ export function DeployStatusModal(props: {
     <Dialog open={isModalOpen}>
       <DialogContent
         dialogCloseClassName="hidden"
-        className="z-[10001] gap-0 p-0 md:max-w-[480px]"
-        dialogOverlayClassName="z-[10000]"
+        className="gap-0 p-0 md:max-w-[480px]"
       >
         <div className="flex flex-col gap-6 p-6">
           <DialogHeader>
diff --git a/apps/dashboard/src/components/contract-components/import-contract/modal.tsx b/apps/dashboard/src/components/contract-components/import-contract/modal.tsx
@@ -49,10 +49,7 @@ export const ImportModal: React.FC<ImportModalProps> = (props) => {
         }
       }}
     >
-      <DialogContent
-        dialogOverlayClassName="z-[9000] rounded-lg"
-        className="z-[9001]"
-      >
+      <DialogContent dialogOverlayClassName="rounded-lg">
         <DialogHeader>
           <DialogTitle className="font-semibold text-2xl tracking-tight">
             Import Contract
diff --git a/apps/dashboard/src/components/settings/Account/Billing/share-free-wallets-modal.client.tsx b/apps/dashboard/src/components/settings/Account/Billing/share-free-wallets-modal.client.tsx
@@ -42,10 +42,7 @@ export function ShareFreeWalletsModal(props: {
 
   return (
     <Dialog open={props.isOpen} onOpenChange={props.onOpenChange}>
-      <DialogContent
-        className="z-[10001] p-0 md:max-w-[380px]"
-        dialogOverlayClassName="z-[10000]"
-      >
+      <DialogContent className="p-0 md:max-w-[380px]">
         <DynamicHeight>
           {screen === "base" && (
             <div className="fade-in-0 animate-in duration-300">
@@ -163,7 +160,7 @@ function SendEmailScreen(props: {
                       <SelectTrigger>
                         <SelectValue placeholder="Select Email App" />
                       </SelectTrigger>
-                      <SelectContent className="z-[10001]">
+                      <SelectContent>
                         <SelectGroup>
                           <SelectItem value="default">
                             Default Email App
diff --git a/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx b/apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx
@@ -106,8 +106,7 @@ export const CreateProjectDialogUI = (props: {
       }}
     >
       <DialogContent
-        className="z-[10001] overflow-hidden p-0"
-        dialogOverlayClassName="z-[10000]"
+        className="overflow-hidden p-0"
         dialogCloseClassName={screen.id === "api-details" ? "hidden" : ""}
       >
         <DynamicHeight>
diff --git a/apps/dashboard/src/contexts/error-handler.tsx b/apps/dashboard/src/contexts/error-handler.tsx
@@ -77,10 +77,7 @@ export const ErrorProvider: ComponentWithChildren = ({ children }) => {
           }
         }}
       >
-        <DialogContent
-          className="z-[10001] max-w-[480px] gap-0 p-0"
-          dialogOverlayClassName="z-[10000]"
-        >
+        <DialogContent className="max-w-[480px] gap-0 p-0">
           {/* min-w-0 is actually required here  */}
           <div className="flex min-w-0 flex-col gap-6 p-6">
             {/* Header */}

Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,7 @@ export function ModuleCard(props: ModuleCardProps) {`
`133`	`133`	`open={isUninstallModalOpen}`
`134`	`134`	`onOpenChange={setIsUninstallModalOpen}`
`135`	`135`	`>`
`136`		`- <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">`
	`136`	`+ <DialogContent>`
`137`	`137`	`<form`
`138`	`138`	`onSubmit={(e) => {`
`139`	`139`	`e.preventDefault();`