Show list instead of table for app eventlogs on mobile

dashboard/src/components/app/Eventlog.vue

@@ -32,7 +32,25 @@ onMounted(async () => {
 
 <template>
   <div>
-    <table class="eventlog-table">
+    <div class="eventlog-list pankow-no-desktop">
+      <div class="eventlog-list-item" v-for="eventlog in eventlogs" :key="eventlog.id" :class="{ 'active': eventlog.isOpen }">
+        <div @click="eventlog.isOpen = !eventlog.isOpen" style="display: flex; justify-content: space-between; padding: 0 10px" >
+          <div style="white-space: nowrap;">
+            {{ prettyLongDate(eventlog.raw.creationTime) }}
+            <b style="margin-left: 10px">{{ eventlog.raw.action }}</b>
+          </div>
+          <div>{{ eventlog.source }}</div>
+        </div>
+        <div v-show="eventlog.isOpen">
+          <div class="eventlog-details" style="margin-top: 10px; padding-top: 5px">
+            <div v-if="eventlog.raw.source.ip" class="eventlog-source">Source IP: <span @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</span></div>
+            <pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <table class="eventlog-table pankow-no-mobile">
       <thead>
         <tr>
           <th>{{ $t('eventlog.time') }}</th>
@@ -114,4 +132,13 @@ onMounted(async () => {
   border-radius: var(--pankow-border-radius);
 }
 
+.eventlog-list-item.active {
+  background-color: var(--pankow-color-background-hover);
+}
+
+.eventlog-list-item {
+  padding: 10px 0;
+  cursor: pointer;
+}
+
 </style>