Improve device detail view

src/api/admin/pages/devices.rs

@@ -1632,10 +1632,14 @@ fn render_perf_events_table(lang: Lang, events: &[PerfEventRow]) -> String {
             msg = t(lang, "devices.perf_events_none"),
         );
     }
+    // Collapsed by default — the table is information-dense and most
+    // operators only look at it when they're chasing a specific
+    // complaint. The Wi-Fi-nearby section uses the same `<details>`
+    // pattern earlier on this page.
     let mut s = format!(
-        r##"<div>
-<h4 class="text-xs uppercase text-slate-500 mb-1">{l_events}</h4>
-<div class="rounded-md border border-slate-800 bg-slate-900 overflow-hidden">
+        r##"<details class="rounded-md border border-slate-800 bg-slate-900">
+  <summary class="cursor-pointer px-3 py-2 text-xs uppercase text-slate-400 hover:text-slate-200 select-none">{l_events} <span class="text-slate-500">({n})</span></summary>
+  <div class="border-t border-slate-800 overflow-hidden">
 <table class="w-full text-sm">
   <thead class="text-xs uppercase text-slate-500 bg-slate-950">
     <tr>
@@ -1646,6 +1650,7 @@ fn render_perf_events_table(lang: Lang, events: &[PerfEventRow]) -> String {
   </thead>
   <tbody class="divide-y divide-slate-800">"##,
         l_events = t(lang, "devices.perf_events_heading"),
+        n = events.len(),
         c_when = t(lang, "devices.perf_events_col_when"),
         c_source = t(lang, "devices.perf_events_col_source"),
         c_summary = t(lang, "devices.perf_events_col_summary"),
@@ -1680,7 +1685,7 @@ fn render_perf_events_table(lang: Lang, events: &[PerfEventRow]) -> String {
             summary = html_escape(&ev.summary),
         );
     }
-    s.push_str("</tbody></table></div></div>");
+    s.push_str("</tbody></table></div></details>");
     s
 }