fix: invisible select items in dialog

Author: nayounsang

.changeset/wild-birds-beg.md

@@ -0,0 +1,5 @@
+---
+"@msw-dev-tool/react": patch
+---
+
+- fix bug: invisible select because of `z-index` of dialog 

packages/react/src/style/msw-dev-tool.css

@@ -106,7 +106,7 @@
 
 .dialog-content {
   @apply bg-white flex flex-col text-gray-900;
-  @apply fixed z-[9999];
+  @apply fixed;
   @apply top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%];
   @apply max-h-[85vh] max-w-[70vw];
   @apply overflow-hidden rounded-lg px-[1rem] py-[2rem] box-border;

packages/react/src/ui/DevToolContent/ToolButtonGroup/index.tsx

@@ -53,7 +53,7 @@ export const ToolButtonGroup = () => {
               <DialogDescription className="m-0 my-2.5">
                 Temp handler is stored in the session storage. If you{" "}
                 <span className="font-bold">reset dev tool</span>, it will be{" "}
-                <span style={{ color: "red" }}>deleted</span>.
+                <span className="text-red-500">deleted</span>.
               </DialogDescription>
               <HandlerForm onClose={() => setIsDialogOpen(false)} />
             </DialogContent>