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
|
the app's type scale so notes blend into dialogs instead of looking
|
||||||
pasted in.
|
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-family: var(--font-sans);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
letter-spacing: -0.006em;
|
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 {
|
.w-md-editor {
|
||||||
--md-editor-font-family: var(--font-sans);
|
--md-editor-font-family: var(--font-sans);
|
||||||
|
|
|
||||||
|
|
@ -572,7 +572,7 @@ function SessionTodoRow({
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="shrink-0"
|
className="ml-auto shrink-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||||
onClick={handleDelete}
|
onClick={handleDelete}
|
||||||
aria-label={`Delete "${draft.title || "new to-do"}"`}
|
aria-label={`Delete "${draft.title || "new to-do"}"`}
|
||||||
>
|
>
|
||||||
|
|
@ -581,15 +581,18 @@ function SessionTodoRow({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{editingDetails ? (
|
{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
|
<MDEditor
|
||||||
value={draft.details}
|
value={draft.details}
|
||||||
onChange={(v) => onChangeLocal({ details: v ?? "" })}
|
onChange={(v) => onChangeLocal({ details: v ?? "" })}
|
||||||
height={160}
|
height={160}
|
||||||
preview="edit"
|
preview="edit"
|
||||||
|
className="ml-6"
|
||||||
/>
|
/>
|
||||||
) : draft.details ? (
|
) : draft.details ? (
|
||||||
<div
|
<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)` }}
|
style={{ borderColor: `color-mix(in srgb, ${accentColor} 25%, transparent)` }}
|
||||||
>
|
>
|
||||||
<MarkdownPreview source={draft.details} />
|
<MarkdownPreview source={draft.details} />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue