Tasks (checkboxes) in callouts: inconsistent starting positions (or margin) between live preview & reading view

You are right, but at least, I guess callouts are supposed to be displayed the same as in reading view when the cursor is not overlapping with them (as CodeMirror’s replace widgets with their DOM rendered using MarkdownRenderer or MarkdownPreviewView).

In fact, this seems to be fixed just by changing app.css a little bit.

  1. Replace .markdown-preview-view with .markdown-rendered in the following rule:
    .markdown-preview-view .task-list-item-checkbox {
      position: relative;
      top: 0.2em;
      margin-inline-end: 0.6em;
    }
    
  2. Add :not(.markdown-rendered .task-list-item-checkbox) to the following rule:
    .markdown-source-view.mod-cm6 .task-list-item-checkbox {
      top: -0.1em;
      vertical-align: middle;
      margin-inline-start: 1em;
      margin-inline-end: 0.25em;
    }
    
2 Likes