Fix for z-index

package.json

@@ -2,7 +2,7 @@
 	"name": "remix-development-tools",
 	"description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
 	"author": "Alem Tuzlak",
-	"version": "4.7.0",
+	"version": "4.7.1",
 	"license": "MIT",
 	"keywords": [
 		"remix",
@@ -54,7 +54,9 @@
 			"default": "./dist/client.css"
 		}
 	},
-	"files": ["dist"],
+	"files": [
+		"dist"
+	],
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Code-Forge-Net/Remix-Dev-Tools.git"
@@ -91,7 +93,11 @@
 		"icons": "npm run run:scripts scripts/icons.ts",
 		"check:unused": "knip "
 	},
-	"workspaces": [".", "test-apps/*", "docs"],
+	"workspaces": [
+		".",
+		"test-apps/*",
+		"docs"
+	],
 	"peerDependencies": {
 		"@remix-run/react": ">=1.15",
 		"react": ">=17",
@@ -142,4 +148,4 @@
 		"react-use-websocket": "^4.8.1",
 		"tailwind-merge": "^1.14.0"
 	}
-}
+}

src/client/RemixDevTools.tsx

@@ -51,7 +51,7 @@ const LiveUrls = () => {
 	}
 	if (settings.liveUrls.length === 0) return null
 	return (
-		<div className={clsx("flex fixed items-center gap-2 px-2", envsClassName)}>
+		<div className={clsx("flex fixed items-center z-[9998] gap-2 px-2", envsClassName)}>
 			{settings.liveUrls.map((env) => {
 				return (
 					<Link
@@ -107,7 +107,7 @@ const Breakpoints = () => {
 	return (
 		<div
 			className={clsx(
-				"flex fixed bottom-0 left-0 mb-5 rounded-full bg-[#212121] size-10 text-white flex items-center justify-center items-center gap-2 mx-1"
+				"flex fixed bottom-0 left-0 mb-5 rounded-full bg-[#212121] z-[9998] size-10 text-white flex items-center justify-center items-center gap-2 mx-1"
 			)}
 		>
 			{breakpoint?.name}