From ba4e7f3803c909eb7fa85a1ccabfa3a728c27f7d Mon Sep 17 00:00:00 2001
From: Brian Fertig <brian.fertig@bio-techne.com>
Date: Tue, 29 Sep 2026 08:10:02 -0600
Subject: [PATCH] Fix markdown preview styling and delete button in session
 dialog

- Bump `.wmde-markdown` specificity with an `html` prefix so globals.css
  wins the cascade over the library's lazy-loaded chunk, and make the
  preview background transparent so it blends into its container card.
- Add destructive color/hover to the to-do delete button for clarity.
- Indent the details editor and preview (`ml-6`) so their left edge aligns
  with the title text rather than the checkbox column.
---
 app/globals.css                           | 12 +++++++++++-
 components/board/group-session-dialog.tsx |  7 +++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index f2892ce..e29fa82 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2268,10 +2268,20 @@ html.theme-notebook [data-group-card] .line-through::after {
    the app's type scale so notes blend into dialogs instead of looking
    pasted in.
 --------------------------------------------------------------------------- */
-.wmde-markdown {
+/* Prefixed with `html` so this out-specificity the library's own
+   `.wmde-markdown` rules regardless of stylesheet order -- its CSS ships in
+   a lazy chunk that injects after globals.css, and at equal specificity the
+   later sheet would win the cascade. `html.theme-cyberpunk .wmde-markdown`
+   (0,2,1) still overrides this (0,1,1) where the theme wants its own look. */
+html .wmde-markdown {
   font-family: var(--font-sans);
   font-size: 0.875rem;
   letter-spacing: -0.006em;
+  /* The library's GitHub-style palette paints a hard canvas background onto
+     the preview root; make it transparent so styled markdown sits flush with
+     whatever card/box it is rendered inside. */
+  background-color: transparent;
+  color: var(--foreground);
 }
 .w-md-editor {
   --md-editor-font-family: var(--font-sans);
diff --git a/components/board/group-session-dialog.tsx b/components/board/group-session-dialog.tsx
index 43d6133..7de0abf 100644
--- a/components/board/group-session-dialog.tsx
+++ b/components/board/group-session-dialog.tsx
@@ -572,7 +572,7 @@ function SessionTodoRow({
         <Button
           variant="ghost"
           size="icon"
-          className="shrink-0"
+          className="ml-auto shrink-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
           onClick={handleDelete}
           aria-label={`Delete "${draft.title || "new to-do"}"`}
         >
@@ -581,15 +581,18 @@ function SessionTodoRow({
       </div>
 
       {editingDetails ? (
+        // ml-6 indents the details block (checkbox's 16px + the 8px gap) so
+        // its left edge lines up with the title above instead of the checkbox.
         <MDEditor
           value={draft.details}
           onChange={(v) => onChangeLocal({ details: v ?? "" })}
           height={160}
           preview="edit"
+          className="ml-6"
         />
       ) : draft.details ? (
         <div
-          className="max-h-40 overflow-y-auto rounded-md border p-2"
+          className="ml-6 max-h-40 overflow-y-auto rounded-md border p-2"
           style={{ borderColor: `color-mix(in srgb, ${accentColor} 25%, transparent)` }}
         >
           <MarkdownPreview source={draft.details} />