Improve dashboard for mobile devices (#108)

The error list page was not pretty on mobile. This fixes the error list on mobile and closes #105 Co-authored-by: Óscar de Arriba <[email protected]>
elixir-error-tracker · Nov 26, 2024 · 4238933 · 4238933
1 parent 00f8271
commit 4238933
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/lib/error_tracker/web/live/dashboard.html.heex b/lib/error_tracker/web/live/dashboard.html.heex
@@ -1,7 +1,7 @@
 <.form
   for={@search_form}
   id="search"
-  class="mb-4 text-black grid grid-cols-4 gap-2"
+  class="mb-4 text-black grid md:grid-cols-4 grid-cols-2 gap-2"
   phx-change="search"
 >
   <input
@@ -46,10 +46,10 @@
   <table class="w-full text-sm text-left rtl:text-right text-gray-400 table-fixed">
     <thead class="text-xs uppercase bg-gray-900">
       <tr>
-        <th scope="col" class="px-4 pr-2 py-3 w-128">Error</th>
+        <th scope="col" class="px-4 pr-2 w-72">Error</th>
         <th scope="col" class="px-4 py-3 w-72">Occurrences</th>
         <th scope="col" class="px-4 py-3 w-28">Status</th>
-        <th scope="col" class="px-4 py-3 w-32"></th>
+        <th scope="col" class="px-4 py-3 w-28"></th>
       </tr>
     </thead>
     <tbody>
@@ -66,10 +66,13 @@
           <.link navigate={error_path(@socket, error)} class="absolute inset-1">
             <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
           </.link>
-          <p class="whitespace-nowrap text-ellipsis w-full overflow-hidden">
+          <p class="whitespace-nowrap text-ellipsis overflow-hidden">
             (<%= sanitize_module(error.kind) %>) <%= error.reason %>
           </p>
-          <p :if={ErrorTracker.Error.has_source_info?(error)} class="font-normal text-gray-400">
+          <p
+            :if={ErrorTracker.Error.has_source_info?(error)}
+            class="whitespace-nowrap text-ellipsis overflow-hidden font-normal text-gray-400"
+          >
             <%= sanitize_module(error.source_function) %>
             <br />
             <%= error.source_line %>

diff --git a/priv/static/app.css b/priv/static/app.css
@@ -893,10 +893,6 @@ select {
   width: 7rem;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -917,8 +913,8 @@ select {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .flex-col {