From fc9b51f052f8a2a1160e93a01a7f2c05ff0919c6 Mon Sep 17 00:00:00 2001 From: Kevin Hopper Date: Wed, 9 Sep 2026 10:06:20 -0500 Subject: [PATCH] meeting-recorder: style the panel with crow's own tokens The panel shipped with invented CSS variable names (--surface, --border, --text-muted, --accent). None of them exist, so every fallback applied and the panel rendered as white cards with muted grey labels inside the dark dashboard. The checkboxes were worse: the base sheet's "input { width:100% }" stretched each one across its row and shoved the label text to the far right. Now it uses --crow-* tokens and the dashboard's own .card, .btn and .data-table classes, with one deliberate override giving checkboxes their natural width. Hints sit under their labels rather than running on inline. Verified by rendering the panel through renderLayout() and screenshotting it in both schemes; dark mode was the one that was broken and is the one shown in the report. --- .../panel/meeting-recorder.js | 116 ++++++++++-------- 1 file changed, 68 insertions(+), 48 deletions(-) diff --git a/bundles/meeting-recorder/panel/meeting-recorder.js b/bundles/meeting-recorder/panel/meeting-recorder.js index ecc8c534..4407f54d 100644 --- a/bundles/meeting-recorder/panel/meeting-recorder.js +++ b/bundles/meeting-recorder/panel/meeting-recorder.js @@ -50,10 +50,10 @@ export default { .map((s) => { const state = s.state === "done" - ? `done` + ? `done` : s.state === "failed" - ? `failed` - : `${escapeHtml(s.state || "")}`; + ? `failed` + : `${escapeHtml(s.state || "")}`; const detail = s.state === "done" ? `${s.word_count || 0} words` @@ -64,81 +64,100 @@ export default { ${escapeHtml(s.id || "")}`; }) .join("") - : `Nothing recorded yet.`; + : `Nothing recorded yet.`; const content = ` -