From e96e51598a2a5cdbc84f18f4300b65a1c302d4d1 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Wed, 29 Apr 2026 09:08:15 +0200
Subject: [PATCH] v1.5.8: fix audit log table layout (Skeleton outside tbody)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 package.json                 |   2 +-
 src/admin/pages/AuditLog.tsx | 177 +++++++++++++++++++----------------
 2 files changed, 97 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index ebccd7e..dbcd8fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-ts",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "",
   "main": "dist/server.js",
   "scripts": {
diff --git a/src/admin/pages/AuditLog.tsx b/src/admin/pages/AuditLog.tsx
index 8c277e4..df6f3cd 100644
--- a/src/admin/pages/AuditLog.tsx
+++ b/src/admin/pages/AuditLog.tsx
@@ -391,32 +391,25 @@ export default function AuditLog() {
       >
         <div className="admin-card-body">
           <div className="admin-table-responsive">
-            <table className="admin-table">
-              <thead>
-                <tr>
-                  <th>Čas</th>
-                  <th>Uživatel</th>
-                  <th>Akce</th>
-                  <th>Typ entity</th>
-                  <th>Popis</th>
-                  <th>IP</th>
-                </tr>
-              </thead>
-              <tbody>
-                <Skeleton
-                  name="audit-log-rows"
-                  loading={isPending}
-                  fixture={
-                    <div style={{ padding: "1rem" }}>
-                      {Array.from({ length: 10 }, (_, i) => (
-                        <div
-                          key={i}
-                          style={{
-                            display: "flex",
-                            gap: "1rem",
-                            marginBottom: "0.75rem",
-                          }}
-                        >
+            <Skeleton
+              name="audit-log-rows"
+              loading={isPending}
+              fixture={
+                <table className="admin-table">
+                  <thead>
+                    <tr>
+                      <th>Čas</th>
+                      <th>Uživatel</th>
+                      <th>Akce</th>
+                      <th>Typ entity</th>
+                      <th>Popis</th>
+                      <th>IP</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Array.from({ length: 10 }, (_, i) => (
+                      <tr key={i}>
+                        <td>
                           <div
                             style={{
                               width: 110,
@@ -425,6 +418,8 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 80,
@@ -433,6 +428,8 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 70,
@@ -441,6 +438,8 @@ export default function AuditLog() {
                               borderRadius: 10,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 80,
@@ -449,14 +448,18 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
-                              flex: 1,
+                              width: "100%",
                               height: 14,
                               background: "var(--bg-tertiary)",
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 90,
@@ -465,63 +468,75 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
-                        </div>
-                      ))}
-                    </div>
-                  }
-                >
-                  <>
-                    {logs.length === 0 && (
-                      <tr>
-                        <td colSpan={6}>
-                          <div className="admin-empty-state">
-                            <div className="admin-empty-icon">
-                              <svg
-                                width="28"
-                                height="28"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="1.5"
-                              >
-                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                <polyline points="14 2 14 8 20 8" />
-                                <line x1="16" y1="13" x2="8" y2="13" />
-                                <line x1="16" y1="17" x2="8" y2="17" />
-                              </svg>
-                            </div>
-                            <p>Žádné záznamy k zobrazení</p>
-                          </div>
                         </td>
                       </tr>
-                    )}
-                    {logs.length > 0 &&
-                      logs.map((log) => (
-                        <tr key={log.id}>
-                          <td className="admin-mono">
-                            {formatDatetime(log.created_at)}
-                          </td>
-                          <td className="fw-500">{log.username || "-"}</td>
-                          <td>
-                            <span
-                              className={`admin-badge ${ACTION_BADGE_CLASS[log.action] || "admin-badge-secondary"}`}
+                    ))}
+                  </tbody>
+                </table>
+              }
+            >
+              <table className="admin-table">
+                <thead>
+                  <tr>
+                    <th>Čas</th>
+                    <th>Uživatel</th>
+                    <th>Akce</th>
+                    <th>Typ entity</th>
+                    <th>Popis</th>
+                    <th>IP</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {logs.length === 0 && (
+                    <tr>
+                      <td colSpan={6}>
+                        <div className="admin-empty-state">
+                          <div className="admin-empty-icon">
+                            <svg
+                              width="28"
+                              height="28"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
                             >
-                              {ACTION_LABELS[log.action] || log.action}
-                            </span>
-                          </td>
-                          <td>
-                            {ENTITY_TYPE_LABELS[log.entity_type || ""] ||
-                              log.entity_type ||
-                              "-"}
-                          </td>
-                          <td>{log.description || "-"}</td>
-                          <td className="admin-mono">{log.user_ip || "-"}</td>
-                        </tr>
-                      ))}
-                  </>
-                </Skeleton>
-              </tbody>
-            </table>
+                              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                              <polyline points="14 2 14 8 20 8" />
+                              <line x1="16" y1="13" x2="8" y2="13" />
+                              <line x1="16" y1="17" x2="8" y2="17" />
+                            </svg>
+                          </div>
+                          <p>Žádné záznamy k zobrazení</p>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {logs.length > 0 &&
+                    logs.map((log) => (
+                      <tr key={log.id}>
+                        <td className="admin-mono">
+                          {formatDatetime(log.created_at)}
+                        </td>
+                        <td className="fw-500">{log.username || "-"}</td>
+                        <td>
+                          <span
+                            className={`admin-badge ${ACTION_BADGE_CLASS[log.action] || "admin-badge-secondary"}`}
+                          >
+                            {ACTION_LABELS[log.action] || log.action}
+                          </span>
+                        </td>
+                        <td>
+                          {ENTITY_TYPE_LABELS[log.entity_type || ""] ||
+                            log.entity_type ||
+                            "-"}
+                        </td>
+                        <td>{log.description || "-"}</td>
+                        <td className="admin-mono">{log.user_ip || "-"}</td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </Skeleton>
           </div>
 
           <Pagination