reactRouterDevTools

Author: AlemTuzlak

src/client/embedded-dev-tools.tsx

@@ -27,7 +27,10 @@ const Embedded = ({ plugins: pluginArray, mainPanelClassName, className }: Embed
 	const plugins = pluginArray?.map((plugin) => (typeof plugin === "function" ? plugin() : plugin))
 	if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null
 	return (
-		<div id={REACT_ROUTER_DEV_TOOLS} className={clsx("react-router-dev-tools react-router-dev-tools-reset", className)}>
+		<div
+			id={REACT_ROUTER_DEV_TOOLS}
+			className={clsx("react-router-dev-tools react-router-dev-tools-reset h-full flex-row w-full", className)}
+		>
 			<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
 				<Tabs plugins={plugins} />
 				<ContentPanel leftSideOriented={leftSideOriented} plugins={plugins} />

src/client/layout/MainPanel.tsx

@@ -39,7 +39,9 @@ const MainPanel = ({ children, isOpen, isEmbedded = false, className }: MainPane
 				"duration-600 box-border flex w-screen flex-col overflow-auto bg-main text-white opacity-0 transition-all",
 				isOpen ? "opacity-100 drop-shadow-2xl" : "!h-0",
 				isResizing && "cursor-grabbing ",
-				!isEmbedded ? `fixed left-0 ${panelLocation === "bottom" ? "bottom-0" : "top-0 border-b-2 border-main"}` : "",
+				!isEmbedded
+					? `fixed left-0 ${panelLocation === "bottom" ? "bottom-0" : "top-0 border-b-2 border-main"}`
+					: "!w-full !h-full !flex-row",
 				className
 			)}
 		>