diff --git a/packages/web/src/query/MessageView.svelte b/packages/web/src/query/MessageView.svelte
index 1ee3d57d..ce6d9dae 100644
--- a/packages/web/src/query/MessageView.svelte
+++ b/packages/web/src/query/MessageView.svelte
@@ -10,6 +10,7 @@
   export let showLine = false;
   export let showCaller = false;
   export let startLine = 0;
+  export let onMessageClick = null;
 
   export let filter = '';
 
@@ -88,7 +89,7 @@
           {time0}
           {startLine}
           previousRow={index > 0 ? items[index - 1] : null}
-          on:messageclick
+          {onMessageClick}
         />
       {/each}
     </table>
diff --git a/packages/web/src/query/MessageViewRow.svelte b/packages/web/src/query/MessageViewRow.svelte
index 9f9ed9cd..0d63ddbe 100644
--- a/packages/web/src/query/MessageViewRow.svelte
+++ b/packages/web/src/query/MessageViewRow.svelte
@@ -12,7 +12,6 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import moment from 'moment';
   import JSONTree from '../jsontree/JSONTree.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
@@ -27,17 +26,16 @@
   export let startLine;
 
   export let previousRow = null;
+  export let onMessageClick = null;
 
   let isExpanded = false;
-
-  const dispatch = createEventDispatcher();
 </script>
 
 <tr
   class:isError={row.severity == 'error'}
   class:isDebug={row.severity == 'debug'}
   class:isActive={row.line}
-  on:click={() => dispatch('messageclick', row)}
+  on:click={() => onMessageClick?.(row)}
 >
   <td>{index + 1}</td>
   <td>
@@ -88,6 +86,9 @@
     border-top: 1px solid var(--theme-border);
     padding: 5px;
   }
+  tr.isActive {
+    cursor: pointer;
+  }
   tr.isActive:hover {
     background: var(--theme-bg-2);
   }
diff --git a/packages/web/src/query/SocketMessageView.svelte b/packages/web/src/query/SocketMessageView.svelte
index aba484e9..4c0700d0 100644
--- a/packages/web/src/query/SocketMessageView.svelte
+++ b/packages/web/src/query/SocketMessageView.svelte
@@ -16,6 +16,7 @@
   export let showNoMessagesAlert = false;
   export let startLine = 0;
   export let onChangeErrors = null;
+  export let onMessageClick = null;
 
   const cachedMessagesRef = createRef([]);
   const lastErrorMessageCountRef = createRef(0);
@@ -69,5 +70,5 @@
 {#if showNoMessagesAlert && (!displayedMessages || displayedMessages.length == 0)}
   <ErrorInfo message="No messages" icon="img alert" />
 {:else}
-  <MessageView items={displayedMessages} on:messageclick {showProcedure} {showLine} {showCaller} {startLine} />
+  <MessageView items={displayedMessages} {onMessageClick} {showProcedure} {showLine} {showCaller} {startLine} />
 {/if}
diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte
index d518e5b0..d081ac58 100644
--- a/packages/web/src/tabs/QueryTab.svelte
+++ b/packages/web/src/tabs/QueryTab.svelte
@@ -469,7 +469,7 @@
         <svelte:fragment slot="0">
           <SocketMessageView
             eventName={sessionId ? `session-info-${sessionId}` : null}
-            on:messageClick={handleMesageClick}
+            onMessageClick={handleMesageClick}
             {executeNumber}
             startLine={executeStartLine}
             showProcedure