new column resizer

package.json

@@ -71,6 +71,7 @@
     "@mui/material": "^5.14.0",
     "framer-motion": "^10.15.1",
     "lodash": "^4.17.21",
+    "re-resizable": "^6.9.11",
     "react-fast-compare": "^3.2.2",
     "react-resize-detector": "^8.0.4"
   }

src/viewer/log/LogView.tsx

@@ -25,6 +25,8 @@ import ReactResizeDetector from "react-resize-detector";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { getSegmentMaxLevel } from "../hooks/useRowProperty";
 import Tooltip from "@mui/material/Tooltip";
+import { Resizable } from 're-resizable';
+import { relative } from "path";
 
 interface Props {
 	logFile: LogFile;
@@ -433,17 +435,29 @@ export default class LogView extends React.Component<Props, State> {
 		const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT;
 		const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader);
-
+		const style = {
+			display: "inline-block",
+			alignItems: "center",
+			justifyContent: "center",
+			border: "solid 1px #ddd",
+			background: "#f0f0f0",
+		  };
 		return (
-			<ReactResizeDetector
-				handleWidth
-				key={columnIndex}
-				onResize={(width) => this.setColumnWidth(value, width!)}
-			>
+			// <ReactResizeDetector
+			// 	handleWidth
+			// 	key={columnIndex}
+			// 	onResize={(width) => this.setColumnWidth(value, width!)}
+			// >
 				<div className="resizable-content" style={columnHeaderStyle} key={columnIndex}>
-					<div style={columnHeaderInnerStyle}>{value}</div>
+					<div style={columnHeaderInnerStyle}>
+						<Resizable style={style}
+    defaultSize={{
+      width: 200,
+      height: 40
+    }}>{value}</Resizable>
+					</div>
 				</div>
-			</ReactResizeDetector>
+			// </ReactResizeDetector>
 		);
 	}