fix(admin): render service health details as structured HTML

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "proseWrap": "preserve"
+}

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
+      // create a table of key-value pairs for each property in the JSON object
-      const detailList = Object.entries(detailObj)
+      const detailTable = Object.entries(detailObj)
-        .map(([key, value]) => `<li><strong>${key}:</strong> ${value}</li>`)
+        .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
     }

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;