From b44cd40e36586b106d26f34f8ae4b257aa77294f Mon Sep 17 00:00:00 2001 From: Frederic Cabassut Date: Sun, 22 Mar 2026 19:49:10 +0100 Subject: [PATCH] fix: align nested checkboxes in rich text task lists Nested TipTap task lists (indented children) broke the flex layout because the nested ul was treated as an inline flex child. Now the li uses flex-wrap with align-items: flex-start, and nested task lists take full width with left padding for indentation. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app.css b/src/app.css index 9fd88e7..b426d9f 100644 --- a/src/app.css +++ b/src/app.css @@ -135,12 +135,19 @@ body::before { .tiptap ul[data-type="taskList"] li, .prose ul.task-list li { display: flex; - align-items: center; + align-items: flex-start; + flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; } +/* Nested task lists take full width below the parent item */ +.tiptap ul[data-type="taskList"] li > ul[data-type="taskList"] { + flex-basis: 100%; + padding-left: 1.5rem; +} + .tiptap ul[data-type="taskList"] li::marker, .prose ul.task-list li::marker { content: none; @@ -151,6 +158,7 @@ body::before { display: flex; align-items: center; flex-shrink: 0; + margin-top: 0.125rem; } /* Shared checkbox styles */