From 45ae0929e6a34a6512d84d407b844d946b7eb1b1 Mon Sep 17 00:00:00 2001
From: Allan Eising <allan@eising.dk>
Date: Wed, 16 Jul 2025 06:54:48 +0200
Subject: [PATCH] Make audit-table responsive

---
 .../src/components/audit/AuditTable.vue       | 342 ++++++++++--------
 .../src/views/clients/ClientTreeList.vue      |   1 -
 2 files changed, 198 insertions(+), 145 deletions(-)

diff --git a/packages/sshecret-frontend/src/components/audit/AuditTable.vue b/packages/sshecret-frontend/src/components/audit/AuditTable.vue
index 500ffef..86ca397 100644
--- a/packages/sshecret-frontend/src/components/audit/AuditTable.vue
+++ b/packages/sshecret-frontend/src/components/audit/AuditTable.vue
@@ -1,152 +1,172 @@
 <template>
   <template v-if="auditEntries">
-    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
-      <thead class="bg-gray-50 dark:bg-gray-700">
-        <tr>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            &nbsp;
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Timestamp
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Subsystem
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Operation
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Client
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Secret
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Message
-          </th>
-          <th
-            scope="col"
-            class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
-          >
-            Origin
-          </th>
-        </tr>
-      </thead>
-      <tbody class="bg-white dark:bg-gray-800">
-        <template v-for="entry in auditEntries" :key="entry.id">
-          <tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
-            <td>
-              <sl-icon-button
-                name="chevron-right"
-                @click="toggle(entry.id)"
-                :class="{ 'rotate-90': isExpanded(entry.id) }"
-              ></sl-icon-button>
-            </td>
-            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-              {{ entry.timestamp }}
-            </td>
-            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-              {{ entry.subsystem }}
-            </td>
-
-            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-              {{ entry.operation }}
-            </td>
-
-            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-              <abbr :title="entry.client_id" v-if="entry.client_name">{{ entry.client_name }}</abbr>
-            </td>
-            <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
-              <abbr :title="entry.secret_id" v-if="entry.secret_name">{{ entry.secret_name }}</abbr>
-            </td>
-            <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
-              {{ entry.message }}
-            </td>
-            <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
-              {{ entry.origin }}
-            </td>
+    <div id="audit-table">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+        <thead class="bg-gray-50 dark:bg-gray-700">
+          <tr class="audit-table-row">
+            <th
+              scope="col"
+              class="audit-col-chevron p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              &nbsp;
+            </th>
+            <th
+              scope="col"
+              class="audit-col-timestamp p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Timestamp
+            </th>
+            <th
+              scope="col"
+              class="audit-col-subsystem p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Subsystem
+            </th>
+            <th
+              scope="col"
+              class="audit-col-operation p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Operation
+            </th>
+            <th
+              scope="col"
+              class="audit-col-client p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Client
+            </th>
+            <th
+              scope="col"
+              class="audit-col-secret p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Secret
+            </th>
+            <th
+              scope="col"
+              class="audit-col-message p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Message
+            </th>
+            <th
+              scope="col"
+              class="audit-col-origin p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+            >
+              Origin
+            </th>
           </tr>
-          <tr v-if="isExpanded(entry.id)" class="auditRow">
-            <td></td>
-            <td colspan="8">
-              <dl
-                class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
+        </thead>
+        <tbody class="bg-white dark:bg-gray-800">
+          <template v-for="entry in auditEntries" :key="entry.id">
+            <tr class="audit-table-row auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
+              <td class="audit-col-chevron">
+                <sl-icon-button
+                  name="chevron-right"
+                  @click="toggle(entry.id)"
+                  :class="{ 'rotate-90': isExpanded(entry.id) }"
+                ></sl-icon-button>
+              </td>
+              <td
+                class="audit-col-timestamp p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
               >
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
-                  <dd class="text-xs font-semibold">{{ entry.id }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
-                  <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
-                  <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
-                  <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
-                  <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
-                  <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
-                  <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
-                  <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
-                  <dd class="text-xs font-semibold">{{ entry.message }}</dd>
-                </div>
-                <div class="flex flex-col pb-3">
-                  <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
-                  <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
-                </div>
-                <template v-if="entry.data">
-                  <template v-for="(value, key) in entry.data">
-                    <div class="flex flex-col pb-3">
-                      <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
-                      <dd class="text-xs font-semibold">{{ value }}</dd>
-                    </div>
+                {{ entry.timestamp }}
+              </td>
+              <td
+                class="audit-col-subsystem p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                {{ entry.subsystem }}
+              </td>
+
+              <td
+                class="audit-col-operation p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                {{ entry.operation }}
+              </td>
+
+              <td
+                class="audit-col-client p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                <abbr :title="entry.client_id" v-if="entry.client_name">{{
+                  entry.client_name
+                }}</abbr>
+              </td>
+              <td
+                class="audit-col-secret p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
+              >
+                <abbr :title="entry.secret_id" v-if="entry.secret_name">{{
+                  entry.secret_name
+                }}</abbr>
+              </td>
+              <td
+                class="audit-col-message p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
+              >
+                {{ entry.message }}
+              </td>
+              <td
+                class="audit-col-operation p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400"
+              >
+                {{ entry.origin }}
+              </td>
+            </tr>
+            <tr v-if="isExpanded(entry.id)" class="auditRow">
+              <td></td>
+              <td colspan="8">
+                <dl
+                  class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
+                >
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
+                    <dd class="text-xs font-semibold">{{ entry.id }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
+                    <dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
+                    <dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
+                    <dd class="text-xs font-semibold">{{ entry.operation }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
+                    <dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
+                    <dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
+                    <dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
+                    <dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
+                    <dd class="text-xs font-semibold">{{ entry.message }}</dd>
+                  </div>
+                  <div class="flex flex-col pb-3">
+                    <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
+                    <dd class="text-xs font-semibold">{{ entry.origin }}</dd>
+                  </div>
+                  <template v-if="entry.data">
+                    <template v-for="(value, key) in entry.data">
+                      <div class="flex flex-col pb-3">
+                        <dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
+                        <dd class="text-xs font-semibold">{{ value }}</dd>
+                      </div>
+                    </template>
                   </template>
-                </template>
-              </dl>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+                </dl>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
     <template v-if="shouldPaginate">
       <div
         class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
@@ -250,10 +270,44 @@ watch([offset, pageNum, auditFilter], loadLogs)
 onMounted(loadLogs)
 </script>
 <style>
+@reference "tailwindcss";
 tr.auditRow {
   background-color: var(--color-white);
 }
 tr.auditRow:nth-child(even) {
   background-color: var(--color-gray-50);
 }
+
+th.audit-col-chevron,
+td.audit-col-chevron {
+}
+th.audit-col-timestamp,
+td.audit-col-timestamp {
+  @apply flex lg:table-cell;
+}
+th.audit-col-subsystem,
+td.audit-col-subsystem {
+  @apply hidden 2xl:table-cell;
+}
+th.audit-col-operation,
+td.audit-col-operation {
+  @apply hidden 2xl:table-cell;
+}
+th.audit-col-client,
+td.audit-col-client {
+  @apply hidden lg:table-cell;
+}
+th.audit-col-secret,
+td.audit-col-secret {
+  @apply hidden lg:table-cell;
+}
+td.audit-col-message,
+th.audit-col-message {
+  @apply flex lg:table-cell md:text-clip;
+}
+
+th.audit-col-origin,
+td.audit-col-origin {
+  @apply hidden 2xl:table-cell;
+}
 </style>
diff --git a/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue b/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
index 35e89a8..b1a43a5 100644
--- a/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
@@ -174,7 +174,6 @@ function itemSelected(event: Event) {
     } else {
       const secretId = el.dataset.name
       const parentId = el.dataset.parentId
-      console.log(el.dataset)
       router.push({
         name: 'ClientSecret',
         params: { parentId: el.dataset.parentId, id: el.dataset.name },