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.
This commit is contained in:
Brian Fertig 2026-09-29 08:10:02 -06:00
parent 05a633458d
commit ba4e7f3803
2 changed files with 16 additions and 3 deletions

View File

@ -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);

View File

@ -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} />