Update UI to show bread crumbs

Author: odarriba

lib/error_tracker/web/live/show.html.heex

@@ -25,6 +25,20 @@
         <%= @error.source_line %></pre>
     </.section>
 
+    <.section :if={@occurrence.bread_crumbs != []} title="Bread crumbs">
+      <div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
+        <table class="w-full text-sm text-gray-400 table-fixed">
+          <tr
+            :for={{bread_crumb, index} <- Enum.with_index(@occurrence.bread_crumbs)}
+            class="border-b bg-gray-400/10 border-gray-900 last:border-b-0"
+          >
+          <td class="w-11 pl-2 py-4 font-medium text-white relative text-right"><%= length(@occurrence.bread_crumbs) - index %>.</td>
+          <td class="px-2 py-4 font-medium text-white relative"><%= bread_crumb %></td>
+          </tr>
+        </table>
+      </div>
+    </.section>
+
     <.section :if={@occurrence.stacktrace.lines != []} title="Stacktrace">
       <div class="p-4 bg-gray-300/10 border border-gray-900 rounded-lg">
         <div class="w-full mb-4">

priv/static/app.css

@@ -885,6 +885,10 @@ select {
   width: 2.5rem;
 }
 
+.w-11 {
+  width: 2.75rem;
+}
+
 .w-28 {
   width: 7rem;
 }
@@ -1129,6 +1133,10 @@ select {
   padding-bottom: 11.5px;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1145,6 +1153,10 @@ select {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .align-top {
   vertical-align: top;
 }
@@ -1318,6 +1330,10 @@ select {
   border-radius: 4px;
 }
 
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .last-of-type\:border-b-0:last-of-type {
   border-bottom-width: 0px;
 }