Use plain Bulma themes when possible

core/templates/pages/tasks-detail.html

@@ -25,7 +25,19 @@
                 <div class="has-text-grey"><code>{{ row.actor_identifier }}</code></div>
               {% endif %}
             </td>
-            <td><code>{{ row.payload }}</code></td>
+            <td>
+              {% if row.payload_view.summary_items %}
+                <div class="tags" style="margin-bottom: 0.35rem;">
+                  {% for item in row.payload_view.summary_items %}
+                    <span class="tag task-ui-badge"><strong>{{ item.0 }}</strong>: {{ item.1 }}</span>
+                  {% endfor %}
+                </div>
+              {% endif %}
+              <details>
+                <summary class="is-size-7 has-text-link" style="cursor:pointer;">View payload JSON</summary>
+                <pre class="task-event-payload">{{ row.payload_view.pretty_text }}</pre>
+              </details>
+            </td>
           </tr>
         {% empty %}
           <tr><td colspan="4">No events.</td></tr>
@@ -47,4 +59,23 @@
     </table>
   </article>
 </div></section>
+<style>
+  .task-event-payload {
+    margin-top: 0.35rem;
+    padding: 0.6rem;
+    border-radius: 8px;
+    border: 1px solid rgba(127, 127, 127, 0.25);
+    background: rgba(245, 245, 245, 0.75);
+    color: #1f1f1f;
+    max-width: 72ch;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  [data-theme="dark"] .task-event-payload {
+    background: rgba(35, 35, 35, 0.75);
+    color: #f5f5f5;
+    border-color: rgba(200, 200, 200, 0.35);
+  }
+</style>
 {% endblock %}