From 3bc838a9889631edb1fd9896b680d2d4fed90ca8 Mon Sep 17 00:00:00 2001
From: dirkmc <dirkmdev@gmail.com>
Date: Thu, 1 Jun 2023 16:13:33 +0200
Subject: [PATCH] feat: expand mpool params on click (#1484)

---
 react/src/Mpool.css | 6 +++---
 react/src/Mpool.js  | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/react/src/Mpool.css b/react/src/Mpool.css
index 2a30e787e..45ca741b3 100644
--- a/react/src/Mpool.css
+++ b/react/src/Mpool.css
@@ -119,7 +119,7 @@
     height: 0.5em;
 }
 
-.mpool .params{
+.mpool .params {
     width: 1080px;
     text-overflow: ellipsis;
     cursor: pointer;
@@ -128,8 +128,8 @@
     white-space: nowrap;
 }
 
-.mpool .params:hover{
+.mpool .params.expanded {
     overflow: visible;
-    white-space: normal;
     width: auto;
+    white-space: pre
 }
\ No newline at end of file
diff --git a/react/src/Mpool.js b/react/src/Mpool.js
index c7b609afe..0302030ad 100644
--- a/react/src/Mpool.js
+++ b/react/src/Mpool.js
@@ -44,6 +44,10 @@ function MpoolMessage(props) {
     const i = props.i
     const msg = props.msg
 
+    const handleParamsClick = (el) => {
+        el.target.classList.toggle('expanded')
+    }
+
     return <>
         <tr key={"to"}>
             <td>To</td>
@@ -68,7 +72,7 @@ function MpoolMessage(props) {
         <tr key={i+"params"}>
             <td>Params</td>
             <td>
-                <div className="params">{msg.Params}</div>
+                <div onClick={handleParamsClick} className="params">{msg.Params}</div>
             </td>
         </tr>
         <tr key={i+"gas-fee-cap"}>