Detached mode css (#218)

* fix embedded mode styling

* update version

Author: AlemTuzlak

package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "5.1.1",
+	"version": "5.1.2",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

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", className)}
+		>
 			<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
 				<Tabs plugins={plugins} />
 				<ContentPanel leftSideOriented={leftSideOriented} plugins={plugins} />

src/client/layout/ContentPanel.tsx

@@ -28,7 +28,7 @@ const ContentPanel = ({ plugins }: ContentPanelProps) => {
 			{!hideTimeline && (
 				<Fragment>
 					<div className="w-1 bg-gray-500/20" />
-					<div className={clsx("z-10 hidden lg:block h-full w-1/3 p-2")}>
+					<div className={clsx("z-10 hidden lg:block h-full w-1/3 p-2 overflow-y-auto")}>
 						<TimelineTab />
 					</div>
 				</Fragment>

src/client/layout/MainPanel.tsx

@@ -39,11 +39,13 @@ 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
 			)}
 		>
-			{panelLocation === "bottom" && (
+			{panelLocation === "bottom" && !isEmbedded && (
 				<div
 					onMouseDown={enableResize}
 					onMouseUp={disableResize}