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:
parent
05a633458d
commit
ba4e7f3803
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue