From d73e2ab002e14e715c0704f924d52acbe6cb3f7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 20 Aug 2021 19:22:29 +0200
Subject: [PATCH] Make devtools resizable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/DevTools.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/DevTools.jsx b/src/DevTools.jsx
index 633201c6..b016cdc7 100644
--- a/src/DevTools.jsx
+++ b/src/DevTools.jsx
@@ -18,6 +18,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import ColorHash from "color-hash";
 import classNames from "classnames";
 import styles from "./DevTools.module.css";
+import { Resizable } from "re-resizable";
 
 const colorHash = new ColorHash({ lightness: 0.8 });
 
@@ -77,7 +78,19 @@ export function DevTools({ manager }) {
   }
 
   return (
-    <div className={styles.devTools}>
+    <Resizable
+      enable={{
+        top: true,
+        right: false,
+        bottom: false,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false,
+      }}
+      className={styles.devTools}
+    >
       <div className={styles.toolbar}>
         <div
           className={classNames(styles.tab, {
@@ -128,7 +141,7 @@ export function DevTools({ manager }) {
           onClose={() => setSelectedEvent(null)}
         />
       )}
-    </div>
+    </Resizable>
   );
 }