Looking better on mobile.

Shared (Extension)/Resources/event_log.html

@@ -112,13 +112,15 @@
 
   <template x-for="(event, index) in events">
     <div class="mt-3 border-solid border border-fuchsia-700 rounded-lg">
-      <div class="select-none flex cursor-pointer text-xl" @click="selected = selected === index ? null : index">
+      <div class="select-none flex cursor-pointer text-sm md:text-xl"
+        @click="selected = selected === index ? null : index">
         <div class="flex-none w-14 p-4 font-extrabold" x-text="selected === index ? '-' : '+'"></div>
-        <div class="flex-1 w-64 p-4 text-base" x-text="formatDate(event.metadata.signed_at)"></div>
+        <div class="flex-1 w-64 p-4" x-text="formatDate(event.metadata.signed_at)"></div>
-        <div class="flex-initial w-64 p-4" x-text="event.metadata.host"></div>
+        <div class="flex-1 w-64 p-4" x-text="event.metadata.host"></div>
+        <div class="flex-1 w-64 p-4" x-text="formatKind(event.event.kind)"></div>
       </div>
 
-      <pre class="rounded-b-lg bg-slate-200" x-html="highlight(event)" x-show="selected === index"
+      <pre class="rounded-b-lg bg-slate-200 text-sm md:text-xl" x-html="highlight(event)" x-show="selected === index"
         x-transition:enter.opacity.delay.75ms x-transition:leave.opacity>
       </pre>
     </div>

Shared (Extension)/Resources/event_log.js

@@ -4,6 +4,9 @@ import { getPublicKey } from 'nostr-tools';
 import { getHosts, sortByIndex } from './db';
 import { getProfiles, KINDS } from './utils';
 
+const TOMORROW = new Date();
+TOMORROW.setDate(TOMORROW.getDate() + 1);
+
 Alpine.data('eventLog', () => ({
     kinds: KINDS,
     events: [],
@@ -19,7 +22,7 @@ Alpine.data('eventLog', () => ({
 
     // date view
     fromCreatedAt: '2008-10-31',
-    toCreatedAt: new Date().toISOString().split('T')[0],
+    toCreatedAt: TOMORROW.toISOString().split('T')[0],
 
     // kind view
     quickKind: '',
@@ -70,6 +73,11 @@ Alpine.data('eventLog', () => ({
         return new Date(epochSeconds * 1000).toUTCString();
     },
 
+    formatKind(kind) {
+        const k = KINDS.find(([kNum, _]) => kNum === kind);
+        return k ? `${k[1]} (${kind})` : `Unknown (${kind})`;
+    },
+
     // Properties
 
     get fromTime() {