apps/web/src/styles/base.css

@@ -1581,17 +1581,44 @@ button {
   padding: 0;
 }
 
-.editor-content ul[data-type='task_list'] {
+/* Task lists (checkbox lists). Styled globally via the unique
+   `data-type='task_list'` attribute — produced only by docToHtml and the
+   editor nodeview — so checkbox and text line up in the editor
+   (.editor-content) AND every read-mode container that injects docToHtml
+   output (.public-page__body, .comment__body, .legal-page__body, .home-page,
+   .history-panel__preview). Previously these rules were scoped to
+   .editor-content and never reached the read views. Issue #137. */
+ul[data-type='task_list'] {
   list-style: none;
   padding-left: var(--space-2);
 }
 
-.editor-content ul[data-type='task_list'] li {
+ul[data-type='task_list'] li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
 }
 
+/* The checkbox is the top flex child; nudge it onto the first text line and
+   drop the leading/trailing margins of the item's paragraph so the text meets
+   the checkbox instead of dropping a line. Covers both DOM shapes: read-mode
+   `li > input` + `li > p`, and editor `li > label > input` + `li > div > p`. */
+ul[data-type='task_list'] li > input[type='checkbox'],
+ul[data-type='task_list'] li > label {
+  flex: none;
+  margin-top: 0.25em;
+}
+
+ul[data-type='task_list'] li > p:first-child,
+ul[data-type='task_list'] li > div > p:first-child {
+  margin-top: 0;
+}
+
+ul[data-type='task_list'] li > p:last-child,
+ul[data-type='task_list'] li > div > p:last-child {
+  margin-bottom: 0;
+}
+
 .editor-content table {
   border-collapse: collapse;
   margin: var(--space-4) 0;