feat: make DBRowSidePanel resizeable (#508)

packages/app/src/components/DBRowSidePanel.tsx

@@ -1,5 +1,6 @@
 import {
   createContext,
+  MouseEventHandler,
   useCallback,
   useContext,
   useId,
@@ -80,6 +81,25 @@ export default function DBRowSidePanel({
     parseAsStringEnum<Tab>(Object.values(Tab)).withDefault(Tab.Parsed),
   );
 
+  const [panelWidth, setPanelWidth] = useState(
+    Math.round(window.innerWidth * 0.8),
+  );
+  const handleResize = useCallback((e: MouseEvent) => {
+    const offsetRight =
+      document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
+    const maxWidth = document.body.offsetWidth - 25;
+    setPanelWidth(Math.min(offsetRight + 3, maxWidth)); // ensure we bury the cursor in the panel
+  }, []);
+  const startResize: MouseEventHandler<HTMLDivElement> = useCallback(e => {
+    e.preventDefault();
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', endResize);
+  }, []);
+  const endResize = useCallback(() => {
+    document.removeEventListener('mousemove', handleResize);
+    document.removeEventListener('mouseup', endResize);
+  }, []);
+
   // const [queryTab, setQueryTab] = useQueryParam(
   //   'tb',
   //   withDefault(StringParam, undefined),
@@ -162,12 +182,13 @@ export default function DBRowSidePanel({
         }
       }}
       direction="right"
-      size={'80vw'}
+      size={panelWidth}
       zIndex={drawerZIndex}
       enableOverlay={subDrawerOpen}
     >
       <ZIndexContext.Provider value={drawerZIndex}>
         <div className={styles.panel} ref={drawerRef}>
+          <Box className={styles.panelDragBar} onMouseDown={startResize} />
           {isRowLoading && (
             <div className={styles.loadingState}>Loading...</div>
           )}

packages/app/styles/LogSidePanel.module.scss

@@ -13,6 +13,19 @@ $padding-x: 24px;
   border-left: 1px solid $slate-900;
 }
 
+.panelDragBar {
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+
+  &:hover {
+    background-color: $slate-900;
+    transition: background-color 0.2s ease-in-out;
+  }
+}
+
 .panelHeader {
   display: flex;
   justify-content: space-between;