From 50d3e7b476a40d70022d16e26dee90563cde5255 Mon Sep 17 00:00:00 2001
From: claude_code <claude_code@vvzvlad.xyz>
Date: Fri, 26 Jun 2026 19:17:38 +0300
Subject: [PATCH] style(editor): align footnote marker and center task checkbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove top margin from the first paragraph in footnote definitions so the
marker aligns with the first line of text. Adjust the task‑list label to use
the editor line‑height variable for its height and center the checkbox
vertically, keeping it in line with the item’s first text line.
---
 .../editor/components/footnote/footnote.module.css  | 13 +++++++++++++
 .../client/src/features/editor/styles/task-list.css |  8 +++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/features/editor/components/footnote/footnote.module.css b/apps/client/src/features/editor/components/footnote/footnote.module.css
index fb21fc03..f739a331 100644
--- a/apps/client/src/features/editor/components/footnote/footnote.module.css
+++ b/apps/client/src/features/editor/components/footnote/footnote.module.css
@@ -104,6 +104,19 @@
   min-width: 0;
 }
 
+/* The inner editable paragraph inherits `.ProseMirror p { margin: 0.5em 0 }`,
+   which pushes the first text line ~0.5em below the "N." marker (aligned to
+   flex-start), making the number float above the text. Drop the outer margins
+   so the marker and the first line share the same top edge — same approach
+   used for callouts in core.css. */
+.definitionContent > :first-child {
+  margin-top: 0;
+}
+
+.definitionContent > :last-child {
+  margin-bottom: 0;
+}
+
 .backLink {
   flex: 0 0 auto;
   cursor: pointer;
diff --git a/apps/client/src/features/editor/styles/task-list.css b/apps/client/src/features/editor/styles/task-list.css
index b8b9fb89..3fe67e5a 100644
--- a/apps/client/src/features/editor/styles/task-list.css
+++ b/apps/client/src/features/editor/styles/task-list.css
@@ -10,9 +10,15 @@ ul[data-type="taskList"] {
         display: flex;
 
         > label {
-            padding-top: 0.2rem;
+            /* Box exactly one text-line tall and center the checkbox in it, so the
+               checkbox lines up with the first line of the item's text. This tracks
+               the editor line-height (--mantine-line-height-xl) instead of a magic
+               padding-top that drifts from the real line box. */
             flex: 0 0 auto;
             margin-right: 0.5rem;
+            height: calc(var(--mantine-line-height-xl, 1.65) * 1em);
+            display: inline-flex;
+            align-items: center;
             user-select: none;
         }