From d267173e3072db6a57ba0bb3b1e10cc0d33fff98 Mon Sep 17 00:00:00 2001
From: zwitschi <zwitschi82@gmail.com>
Date: Sun, 16 Aug 2026 11:57:58 +0200
Subject: [PATCH] fix(admin): render service health details as structured HTML

---
 .prettierrc            | 7 +++++++
 frontend/src/admin.ts  | 8 ++++----
 frontend/src/style.css | 6 ++++++
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..2f8cdfd
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "proseWrap": "preserve"
+}
diff --git a/frontend/src/admin.ts b/frontend/src/admin.ts
index 3487455..468fad4 100644
--- a/frontend/src/admin.ts
+++ b/frontend/src/admin.ts
@@ -567,11 +567,11 @@ async function renderServiceRow(service: any) {
     try {
       // create a list of key-value pairs for each property in the JSON object
       const detailObj = JSON.parse(svcDetail);
-      // create a list item for each key-value pair in the object
-      const detailList = Object.entries(detailObj)
-        .map(([key, value]) => `<li><strong>${key}:</strong> ${value}</li>`)
+      // create a table of key-value pairs for each property in the JSON object
+      const detailTable = Object.entries(detailObj)
+        .map(([key, value]) => `<tr><td><strong>${key}</strong></td><td>${value}</td></tr>`)
         .join("");
-      service.detail = `<ul>${detailList}</ul>`;
+      service.detail = `<p><table class="service-detail-table">${detailTable}</table></p>`;
     } catch {
       // ignore JSON parse errors
     }
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 6963c3e..385dae7 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1010,6 +1010,12 @@ select {
   text-align: right;
 }
 
+.service-detail-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
 .service-status {
   margin: 0;
   font-weight: 700;