From df566d82551fa9ab63daf8e8cb7fd5ec0b19d517 Mon Sep 17 00:00:00 2001
From: Kian-Meng Ang <kianmeng@cpan.org>
Date: Wed, 31 Jul 2024 01:30:25 +0800
Subject: [PATCH] Highlight and increase clickable area in error listing

Highlight the error item and expand the clickable area when browsing
the error listing to increase UX.
---
 assets/css/app.css                             |  3 +++
 lib/error_tracker/web/live/dashboard.html.heex | 12 ++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 71a77f0..c892a1b 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,3 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+th a {
+    display: block;
+}
diff --git a/lib/error_tracker/web/live/dashboard.html.heex b/lib/error_tracker/web/live/dashboard.html.heex
index 45cd65d..233906d 100644
--- a/lib/error_tracker/web/live/dashboard.html.heex
+++ b/lib/error_tracker/web/live/dashboard.html.heex
@@ -52,19 +52,19 @@
           No errors to show 🎉
         </td>
       </tr>
-      <tr :for={error <- @errors} class="border-b bg-gray-800 border-gray-700">
+      <tr :for={error <- @errors} class="border-b bg-gray-800 border-gray-700 hover:bg-gray-700">
         <th
           scope="row"
           class="px-4 py-4 font-medium text-white whitespace-nowrap text-ellipsis overflow-hidden"
         >
           <.link navigate={error_path(@socket, error)}>
             (<%= sanitize_module(error.kind) %>) <%= error.reason %>
+            <p class="font-normal text-gray-400">
+              <%= sanitize_module(error.source_function) %>
+              <br />
+              <%= error.source_line %>
+            </p>
           </.link>
-          <p class="font-normal text-gray-400">
-            <%= sanitize_module(error.source_function) %>
-            <br />
-            <%= error.source_line %>
-          </p>
         </th>
         <td class="px-4 py-4">
           <p>Last: <%= format_datetime(error.last_occurrence_at) %></p>