From da4d96d6f03abcb824c1d940c6e43e5bd5c92f97 Mon Sep 17 00:00:00 2001
From: sfarestam <stefan.farestam@iproov.com>
Date: Tue, 7 Apr 2026 11:05:07 +0200
Subject: [PATCH] fix(editor): align text indentation across bullet, ordered,
 and task lists

Unify text start position for all list types at 2.25em padding:
- Bullet lists: native markers in the padding area
- Ordered lists: CSS counter with absolute positioning and nowrap
- Task lists: checkbox absolutely positioned in the padding area

All three list types now have their text content starting at the
same horizontal position, with markers/numbers/checkboxes aligned
in the padding gutter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/app/src/renderer/src/assets/main.css | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/apps/app/src/renderer/src/assets/main.css b/packages/apps/app/src/renderer/src/assets/main.css
index 6d1cb094..f331884e 100644
--- a/packages/apps/app/src/renderer/src/assets/main.css
+++ b/packages/apps/app/src/renderer/src/assets/main.css
@@ -249,7 +249,34 @@
 
 .ProseMirror.prose ul,
 .ProseMirror.prose ol {
-  padding-left: 1.25em;
+  padding-left: 2.25em;
+}
+
+.milkdown-editor.prose ul {
+  padding-left: 2.25em !important;
+  padding-inline-start: 2.25em !important;
+}
+
+.milkdown-editor.prose ol {
+  list-style: none !important;
+  counter-reset: ol-counter !important;
+  padding-left: 2.25em !important;
+  padding-inline-start: 2.25em !important;
+}
+
+.milkdown-editor.prose ol > li {
+  counter-increment: ol-counter !important;
+  position: relative !important;
+}
+
+.milkdown-editor.prose ol > li::before {
+  content: counter(ol-counter) "." !important;
+  position: absolute !important;
+  left: -2em !important;
+  width: 1.75em !important;
+  text-align: right !important;
+  white-space: nowrap !important;
+  font-variant-numeric: tabular-nums !important;
 }
 
 .ProseMirror.prose li {
@@ -314,30 +341,28 @@
 
 /* Task list checkbox styling (Milkdown GFM) */
 .ProseMirror ul:has(> li[data-item-type="task"]) {
-  padding-inline-start: 0;
-  padding-left: 0;
+  padding-inline-start: 2.25em !important;
+  padding-left: 2.25em !important;
 }
 
 .ProseMirror li[data-item-type="task"] {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
+  position: relative;
   list-style: none;
   margin-top: 0;
   margin-bottom: 0;
 }
 
 .ProseMirror li[data-item-type="task"] > input[type="checkbox"] {
-  flex-shrink: 0;
+  position: absolute;
+  left: -1.75em;
+  top: 0.25em;
   cursor: pointer;
-  margin-top: 0.3em;
   accent-color: var(--color-primary);
 }
 
 .ProseMirror li[data-item-type="task"] > span,
 .ProseMirror li[data-item-type="task"] > div,
 .ProseMirror li[data-item-type="task"] > p {
-  flex: 1;
   line-height: 1.25;
 }