fix: resizer spans whole panel

tannerlinsley · Jul 30, 2020 · 1bda05b · 1bda05b
1 parent 804cad5
commit 1bda05b
Showing 1 changed file with 14 additions and 12 deletions.
diff --git a/src/index.js b/src/index.js
@@ -335,6 +335,20 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
     return (
       <ThemeProvider theme={theme}>
         <Panel ref={ref} className="ReactQueryDevtoolsPanel" {...panelProps}>
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: '100%',
+              height: '4px',
+              marginBottom: '-4px',
+              cursor: 'row-resize',
+              zIndex: 100000,
+            }}
+            onMouseDown={handleDragStart}
+            onMouseUp={handleDragEnd}
+          ></div>
           <div
             style={{
               flex: '1 1 500px',
@@ -346,18 +360,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
               flexDirection: 'column',
             }}
           >
-            <div
-              style={{
-                left: 0,
-                width: '100%',
-                height: '4px',
-                marginBottom: '-4px',
-                cursor: 'row-resize',
-                zIndex: 100000,
-              }}
-              onMouseDown={handleDragStart}
-              onMouseUp={handleDragEnd}
-            ></div>
             <div
               style={{
                 padding: '.5rem',