From 3d8ba1b890521b612d8c0ac5a3b994d632fb29ce Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Aug 2026 13:15:18 +0000
Subject: [PATCH 1/4] Render Markdown in the webapp's editable list-item rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A list-item row now shows its Markdown rendered until it holds the caret,
and its source for exactly as long as it does. Closes the gap where a card
read **Milk** and the editor read `**Milk**`, which looked like a rendering
bug rather than a deliberate limit.

Focused and editing are the same state. That is the decision the rest
follows from: every keystroke handler stays on a real textarea, because a
row with the caret *is* one — no render-mode duplicate of Tab, Enter or the
suggestion arrows, and no focusable non-interactive element for axe to flag.

Four things that fall out of it:

- The textarea is never unmounted, only moved out of flow at opacity-0, so
  NoteModal's imperative focus paths keep working through itemInputRefs and
  the field comes back at a height measured while it was on screen.
- A row only swaps when rendering changes something. `buy milk` renders to
  itself, so a list with no Markdown behaves exactly as it did before.
- An editable row's links are inert and a read-only row's are live: a row
  that owns a caret does not own a link.
- Completed rows render, accepting the ~~strike~~ / line-through collision
  that the spec already accepted for display surfaces.

A click maps back to a source offset rather than landing at 0: nodes now
carry source spans and inlineSourceOffset walks them, both in shared/ so
mobile can reuse them. Both forms share one class list for layout, including
the inline-block/overflow pairing that keeps a span's baseline where a
textarea's is — without it every row silently lost 7px when unfocused. The
grip prevents its default mousedown so a drag never collapses the row
dnd-kit just measured.

Mobile's editable row is unchanged; #867 tracks it and records these
decisions so only the keyboard-churn question is left open there.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QuVeVda1EiJrJrdzsybRAr
---
 docs/specs/markdown-rendering.md              |  95 ++++++-
 mobile/__tests__/ListItem.test.tsx            |   2 +-
 mobile/src/components/ListItem.tsx            |   4 +-
 mobile/src/utils/inlineMarkdown.ts            |   2 +-
 shared/src/__tests__/inlineMarkdown.test.ts   | 119 +++++++++
 shared/src/inlineMarkdown.ts                  | 240 ++++++++++++++++--
 webapp/e2e/tests/keyboard-focus.spec.ts       |  65 +++++
 webapp/e2e/tests/markdown.spec.ts             | 129 +++++++++-
 webapp/src/components/SortableItem.tsx        | 155 ++++++++++-
 .../__tests__/SortableItem.test.tsx           | 112 +++++++-
 .../src/utils/__tests__/inlineCaret.test.ts   |  66 +++++
 webapp/src/utils/inlineCaret.ts               |  95 +++++++
 webapp/src/utils/markdown.ts                  |  45 +++-
 13 files changed, 1076 insertions(+), 53 deletions(-)
 create mode 100644 webapp/src/utils/__tests__/inlineCaret.test.ts
 create mode 100644 webapp/src/utils/inlineCaret.ts

diff --git a/docs/specs/markdown-rendering.md b/docs/specs/markdown-rendering.md
index 7ea8ea4c6..ecfa81ff8 100644
--- a/docs/specs/markdown-rendering.md
+++ b/docs/specs/markdown-rendering.md
@@ -11,11 +11,12 @@ Markdown applies to the **`content` of text notes** in full, and to **list-note
 item text** in an inline-only subset (§2.1):
 
 - **Note titles are plain.** They are rendered as text everywhere.
-- **List-item Markdown renders on display surfaces only.** Note cards, mobile's
-  read-only editor and the collapsed-completed parent label render it; the
-  editable row still shows its source, because it is an always-live input with no
-  preview mode. Closing that gap is
-  [#824](https://github.com/hanzei/jot/issues/824).
+- **List-item Markdown renders everywhere on the webapp, and on display surfaces
+  on mobile.** Note cards, mobile's read-only editor and the collapsed-completed
+  parent label render it on both clients. The webapp's *editable* row renders it
+  too, swapping to source while it holds the caret (§1.2). Mobile's editable row
+  still shows source; closing that gap is
+  [#867](https://github.com/hanzei/jot/issues/867).
 
 ### 1.1 Note cards render links as text
 
@@ -35,15 +36,77 @@ colour that only signals "link" fails anyone who cannot use it. So the label
 renders exactly as the surrounding text.
 
 The open note is unaffected: the webapp's modal preview and mobile's editor both
-render live links, which is where a reader who wants the link already is. One
-consequence worth naming: because the *editable* list-item row shows source
-(above), a link typed into a list item now has no live surface on the webapp at
-all until [#824](https://github.com/hanzei/jot/issues/824) gives that row a view
-mode. Mobile still has one, in its read-only editor.
+render live links, which is where a reader who wants the link already is. An
+*editable* list-item row is the one other place a link stays inert, for a
+different reason — §1.2.
 
 Both clients render the same feature set from the same source string, so a note
 written on a phone reads identically in a browser and the other way round.
 
+### 1.2 The webapp's editable row swaps between rendered and source
+
+A list-item row on the webapp shows its Markdown rendered until it holds the
+caret, and its source for exactly as long as it does. Type `**Milk**`, move
+away, and the row reads **Milk**; click back into it and it reads `**Milk**`
+again, with the caret where you clicked.
+
+**Focused and editing are the same state.** That is the decision the rest
+follows from. Every keystroke a row handles — Tab to indent, Enter to split,
+arrows to move between rows and through the completed-item suggestions — stays
+on a real `<textarea>`, because a row that has the caret *is* a textarea. There
+is no render-mode duplicate of any of it, and no focusable non-interactive
+element in the markup for a screen reader to find or axe to flag.
+
+Four consequences, each of which is a trap avoided rather than a preference:
+
+- **The textarea is never unmounted**, only moved out of flow and faded to
+  `opacity-0`. Everything that reaches for a row imperatively — NoteModal's
+  Enter-to-split, its arrow navigation, its "add item" focus, all through the
+  `itemInputRefs` map — keeps working on a row that happens to be rendered, and
+  the height the field comes back at was measured while it was on screen rather
+  than at the moment of focus. `visibility: hidden` and `display: none` both
+  remove an element from the focus order, so neither can be used here.
+- **A row only swaps when rendering changes something.** `buy milk` renders to
+  `buy milk`, so that row keeps the always-live input it has always had. So do
+  `# not a heading` and `![alt](url)`, which §2.1 shows as literal source. Only
+  a row whose author typed markup that actually renders pays for any of this,
+  which is what keeps a plain list exactly as it was.
+- **An editable row's links are inert; a read-only row's are live.** One click
+  in an editable row already means "put the caret here", and a second meaning on
+  the same pixel has no way to resolve itself — so the label renders as ordinary
+  text and nothing looks followable, the same outcome as a card (§1.1) reached
+  by a different route. A read-only row has no caret to place, so its links work
+  and it drops the hidden textarea entirely rather than leaving a focusable copy
+  of the text behind the rendered one.
+- **Completed rows render like any other**, `~~strike~~` and all, which §2.1
+  already accepted for display surfaces. A struck word inside an already-struck
+  row is indistinguishable; that is the cost of the subset staying a subset.
+
+**A click has to place the caret itself.** The user points at character 4 of
+`buy milk` and the field holds `buy **milk**`, where that character is at 6.
+The browser maps the point to a position in the rendered DOM; `inlineSourceOffset`
+maps that back through the source spans `normalizeInlineTokens` records. Without
+it the caret lands at 0 on every click — which is what the *text-note* editor
+does today, and is tolerable there only because it happens once per note instead
+of once per row, and because the next click lands in a real textarea and
+corrects it.
+
+**Both forms must be the same height**, or every click shifts the rows below it.
+They share one class list for width, padding and wrapping, and two less obvious
+properties: a textarea is an `inline-block` that baselines on its bottom margin
+edge, which reserves descender space in the line box around it, and a span only
+does the same with a non-`visible` `overflow` (CSS 2.1 §10.8.1). Get that wrong
+and every row silently loses 7px when it is not focused. Where the two genuinely
+differ — markers moving a wrap point on a long row — the change is animated over
+120ms, behind `prefersReducedMotion`.
+
+**A mouse drag does not collapse the row it starts on.** The grip prevents the
+default mousedown, so grabbing it never moves focus off the field. Otherwise the
+row would change height in the same tick the `PointerSensor` activates and
+dnd-kit measures, and the drag would run against a rect for a size the row no
+longer has. A keyboard drag needs no such guard: it arrives by Tab, so the row
+has already collapsed and settled before Space starts it.
+
 | | Webapp | Mobile |
 |---|---|---|
 | Lexer | `marked` (`gfm: true`, `breaks: true`) | `marked` (`gfm: true`, `breaks: true`) |
@@ -300,6 +363,9 @@ spec exists to prevent.
 | Shared conformance corpora (both test suites) | `shared/src/markdownCases.ts` |
 | Webapp node-to-HTML renderer + tag allowlist | `webapp/src/utils/markdown.ts` |
 | Webapp item renderer | `webapp/src/components/InlineMarkdown.tsx` |
+| Webapp editable-row swap (§1.2) | `webapp/src/components/SortableItem.tsx` |
+| Shared rendered-offset → source-offset map | `inlineSourceOffset` in `shared/src/inlineMarkdown.ts` |
+| Webapp click point → rendered offset | `webapp/src/utils/inlineCaret.ts` |
 | Mobile block lexing entry point | `mobile/src/utils/markdown.ts` |
 | Mobile block renderer (editor) | `mobile/src/components/Markdown.tsx` |
 | Mobile card preview renderer | `mobile/src/components/MarkdownPreview.tsx` |
@@ -462,9 +528,12 @@ The heading button stops at `###`, matching §2: a fourth press would produce an
 
 - **Interactive checkboxes.** Toggling a rendered ☐ would mean writing back into
   `content` — a much larger feature than rendering.
-- **Markdown in the *editable* list-item row.** The subset renders on display
-  surfaces (§1); giving the always-live input a view/edit swap is
-  [#824](https://github.com/hanzei/jot/issues/824).
+- **Markdown in mobile's *editable* list-item row.** The webapp's row swaps
+  between rendered and source (§1.2); mobile's still shows source, because the
+  same swap there unmounts a focused `TextInput` on every row change and the
+  software keyboard goes with it. Tracked as
+  [#867](https://github.com/hanzei/jot/issues/867), which records the decisions
+  the webapp already made so mobile only has to solve the keyboard problem.
 - **Block Markdown in list items.** Not a gap to be filled later — §2.1 explains
   why an item cannot hold it.
 - **Syntax highlighting** in code blocks. The webapp allowlist drops the
diff --git a/mobile/__tests__/ListItem.test.tsx b/mobile/__tests__/ListItem.test.tsx
index 8c8f084a3..383e9e315 100644
--- a/mobile/__tests__/ListItem.test.tsx
+++ b/mobile/__tests__/ListItem.test.tsx
@@ -83,7 +83,7 @@ describe('ListItem', () => {
 
   // A read-only row is a display surface, so it renders the inline Markdown
   // subset; an editable row is an input and keeps showing its source. Rendering
-  // in the editable row is #824.
+  // in the editable row is #867.
   it('renders markdown in the read-only row', () => {
     const { getByTestId, queryByTestId } = render(
       <ListItem text="buy **milk**" completed={false} editable={false} />,
diff --git a/mobile/src/components/ListItem.tsx b/mobile/src/components/ListItem.tsx
index 986801f9f..32e9f18eb 100644
--- a/mobile/src/components/ListItem.tsx
+++ b/mobile/src/components/ListItem.tsx
@@ -233,7 +233,9 @@ function ListItem({
           {/* A read-only row is a display surface, so it renders the inline
               Markdown subset — the same thing the note card shows for this
               item. An editable row stays a plain TextInput showing source;
-              giving it a rendered mode is #824, not this. */}
+              giving it a rendered mode is #867, not this — the webapp already
+              swaps (docs/specs/markdown-rendering.md §1.2), and that ticket
+              records why the same swap here is a keyboard problem first. */}
           {editable ? (
             <TextInput
               ref={inputRef}
diff --git a/mobile/src/utils/inlineMarkdown.ts b/mobile/src/utils/inlineMarkdown.ts
index baad8c0f4..bcbc870fa 100644
--- a/mobile/src/utils/inlineMarkdown.ts
+++ b/mobile/src/utils/inlineMarkdown.ts
@@ -22,7 +22,7 @@ export function inlineMarkdownNodes(text: string): InlineNode[] {
  *
  * A control's accessible name should identify the item the way the user knows it;
  * spelling out `**` and backticks is never useful there. This also keeps the
- * checkbox's name correct once #824 renders the editable row too.
+ * checkbox's name correct once #867 renders the editable row too.
  */
 export function inlineMarkdownToText(text: string): string {
   if (!text.trim()) return text;
diff --git a/shared/src/__tests__/inlineMarkdown.test.ts b/shared/src/__tests__/inlineMarkdown.test.ts
index e6e1e8a91..1024b955e 100644
--- a/shared/src/__tests__/inlineMarkdown.test.ts
+++ b/shared/src/__tests__/inlineMarkdown.test.ts
@@ -3,6 +3,8 @@ import { Lexer } from 'marked';
 import {
   normalizeInlineTokens,
   flattenInlineNodes,
+  inlineSourceOffset,
+  inlineRendersAsSource,
   INLINE_LEXER_OPTIONS,
   type InlineNode,
 } from '../inlineMarkdown';
@@ -15,6 +17,11 @@ function lex(markdown: string): InlineNode[] {
   return normalizeInlineTokens(Lexer.lexInline(markdown, INLINE_LEXER_OPTIONS));
 }
 
+/** The same nodes, annotated with where each one came from in `markdown`. */
+function lexWithSource(markdown: string): InlineNode[] {
+  return normalizeInlineTokens(Lexer.lexInline(markdown, INLINE_LEXER_OPTIONS), 0);
+}
+
 /**
  * Renders a node tree to a compact string so a case's expectation reads as one
  * line. `text("buy ")strong(text("milk"))` is easier to review against the spec
@@ -142,4 +149,116 @@ describe('normalizeInlineTokens', () => {
   it('turns a newline into a br node, not a text newline', () => {
     expect(summarize(lex('a\nb'))).toBe('text("a")brtext("b")');
   });
+
+  describe('source tracking', () => {
+    it('records no spans unless a source offset is passed', () => {
+      for (const node of lex('buy **milk**')) {
+        expect(node.src).toBeUndefined();
+      }
+    });
+
+    it('spans the content of a construct, not its delimiters', () => {
+      const nodes = lexWithSource('buy **milk**');
+      const text = nodes[0]!;
+      const strong = nodes[1]!;
+      expect(text.src).toEqual({ start: 0, end: 4 });
+      // The strong node covers `**milk**`; the text inside it covers `milk`.
+      expect(strong.src).toEqual({ start: 4, end: 12 });
+      expect(strong.type === 'strong' && strong.children[0]?.src).toEqual({ start: 6, end: 10 });
+    });
+
+    it('spans code content inside its backticks', () => {
+      const code = lexWithSource('run `npm ci`')[1]!;
+      expect(code.src).toEqual({ start: 5, end: 12 });
+    });
+  });
+
+  describe('inlineSourceOffset', () => {
+    /** The source offset a click at `renderedOffset` characters in should give. */
+    function offsetIn(markdown: string, renderedOffset: number): number {
+      return inlineSourceOffset(lexWithSource(markdown), renderedOffset, markdown.length);
+    }
+
+    it('maps a click inside bold text past the markers', () => {
+      // Rendered "buy milk"; the m of milk is at 4 on screen and 6 in source.
+      expect(offsetIn('buy **milk**', 0)).toBe(0);
+      expect(offsetIn('buy **milk**', 4)).toBe(6);
+      expect(offsetIn('buy **milk**', 6)).toBe(8);
+    });
+
+    it('maps a click inside code past the backtick', () => {
+      expect(offsetIn('run `npm ci`', 4)).toBe(5);
+    });
+
+    it('maps a click inside a link label past the bracket', () => {
+      expect(offsetIn('[docs](https://example.com)', 0)).toBe(1);
+      expect(offsetIn('[docs](https://example.com)', 2)).toBe(3);
+    });
+
+    it('puts a click past the end of the rendered text at the end of the source', () => {
+      expect(offsetIn('buy **milk**', 8)).toBe(12);
+      expect(offsetIn('buy **milk**', 99)).toBe(12);
+      expect(offsetIn('[docs](https://example.com)', 4)).toBe(27);
+    });
+
+    it('counts a line break as one position', () => {
+      expect(offsetIn('a\nb', 1)).toBe(1);
+      expect(offsetIn('a\nb', 2)).toBe(2);
+    });
+
+    it('keeps a click inside a construct that renders at a different length within it', () => {
+      // A literal image is rebuilt rather than echoed, so an offset inside it is
+      // approximate — but it must still land inside the construct.
+      const source = 'see ![alt](https://example.com/y.png)';
+      const offset = inlineSourceOffset(lexWithSource(source), 10, source.length);
+      expect(offset).toBeGreaterThanOrEqual(4);
+      expect(offset).toBeLessThanOrEqual(source.length);
+    });
+
+    it('falls back to the end of the source when nodes carry no spans', () => {
+      expect(inlineSourceOffset(lex('buy **milk**'), 4, 12)).toBe(12);
+    });
+  });
+
+  describe('inlineRendersAsSource', () => {
+    /** Every corpus case, split by whether rendering it changes what is shown. */
+    const RENDERS_AS_SOURCE = new Set([
+      'item-bare-domain',
+      'item-heading-literal',
+      'item-bullet-literal',
+      'item-ordered-literal',
+      'item-task-literal',
+      'item-hr-literal',
+      'item-blockquote-literal',
+      'item-table-literal',
+      'item-image',
+      'item-raw-html',
+      'item-raw-html-script',
+      'item-arithmetic',
+      'item-underscored-word',
+      'item-ampersand',
+      'item-plain',
+    ]);
+
+    for (const testCase of MARKDOWN_ITEM_CASES) {
+      it(`${testCase.id}: ${RENDERS_AS_SOURCE.has(testCase.id) ? 'shows its source' : 'renders differently'}`, () => {
+        expect(inlineRendersAsSource(lex(testCase.markdown), testCase.markdown)).toBe(
+          RENDERS_AS_SOURCE.has(testCase.id),
+        );
+      });
+    }
+
+    it('treats a line break as showing its source', () => {
+      // The textarea and the rendered form both put "b" on the second line.
+      expect(inlineRendersAsSource(lex('a\nb'), 'a\nb')).toBe(true);
+    });
+
+    it('treats a dropped escape as a rendering change', () => {
+      expect(inlineRendersAsSource(lex('\\*x\\*'), '\\*x\\*')).toBe(false);
+    });
+
+    it('treats code as a rendering change even when the characters match', () => {
+      expect(inlineRendersAsSource(lex('`a`'), '`a`')).toBe(false);
+    });
+  });
 });
diff --git a/shared/src/inlineMarkdown.ts b/shared/src/inlineMarkdown.ts
index 0261795d0..f2bac518e 100644
--- a/shared/src/inlineMarkdown.ts
+++ b/shared/src/inlineMarkdown.ts
@@ -43,20 +43,37 @@ export interface InlineMarkdownToken {
   title?: string | null;
 }
 
+/**
+ * Where a node's visible content came from in the source string, as a
+ * half-open `[start, end)` range.
+ *
+ * Present only when `normalizeInlineTokens` is called with a source offset —
+ * see that function. It spans the *content*, not the token: for `**milk**` the
+ * strong node spans the whole thing but its child text node spans just `milk`,
+ * which is what makes a rendered offset inside the child map back linearly.
+ */
+export interface InlineSourceSpan {
+  start: number;
+  end: number;
+}
+
 /**
  * A platform-neutral inline node. Deliberately smaller than marked's token
  * union: everything unsupported has already been degraded to `text` by
  * `normalizeInlineTokens`, so a renderer only has to handle these five cases and
  * cannot accidentally give an unsupported construct a rendering of its own.
+ *
+ * `src` is spelled out per member rather than intersected onto the union so
+ * that narrowing on `type` keeps working exactly as it did.
  */
 export type InlineNode =
-  | { type: 'text'; value: string }
-  | { type: 'code'; value: string }
-  | { type: 'br' }
-  | { type: 'strong'; children: InlineNode[] }
-  | { type: 'em'; children: InlineNode[] }
-  | { type: 'del'; children: InlineNode[] }
-  | { type: 'link'; href: string; children: InlineNode[] };
+  | { type: 'text'; value: string; src?: InlineSourceSpan }
+  | { type: 'code'; value: string; src?: InlineSourceSpan }
+  | { type: 'br'; src?: InlineSourceSpan }
+  | { type: 'strong'; children: InlineNode[]; src?: InlineSourceSpan }
+  | { type: 'em'; children: InlineNode[]; src?: InlineSourceSpan }
+  | { type: 'del'; children: InlineNode[]; src?: InlineSourceSpan }
+  | { type: 'link'; href: string; children: InlineNode[]; src?: InlineSourceSpan };
 
 /**
  * Lexer options both clients must pass when lexing item text.
@@ -74,8 +91,29 @@ export type InlineNode =
  */
 export const INLINE_LEXER_OPTIONS = { gfm: true, breaks: true };
 
-function textNode(value: string): InlineNode {
-  return { type: 'text', value };
+function textNode(value: string, src?: InlineSourceSpan): InlineNode {
+  return src ? { type: 'text', value, src } : { type: 'text', value };
+}
+
+/**
+ * Where a token's visible content starts inside its own `raw` — the length of
+ * the opening delimiter, in effect: 2 for `**milk**`, 1 for `` `npm ci` `` and
+ * for `[docs](url)`, 0 for plain text.
+ *
+ * Found by search rather than by knowing each construct's markers, because a
+ * construct can be spelled several ways (`**x**` and `__x__` are both strong)
+ * and marked does not report which was used. The first occurrence is the right
+ * one for every construct in the subset, since an opening delimiter is never
+ * itself part of the content it opens.
+ *
+ * Worst case — content that also appears inside the opening delimiter, as in
+ * `*[*](x)*` — this lands a few characters out. That moves a caret, which the
+ * user can see and correct; nothing downstream depends on it being exact.
+ */
+function contentOffset(raw: string, content: string): number {
+  if (!content) return 0;
+  const at = raw.indexOf(content);
+  return at === -1 ? 0 : at;
 }
 
 /**
@@ -84,8 +122,8 @@ function textNode(value: string): InlineNode {
  * formatting it had, matching how the webapp's block renderer treats the same
  * case.
  */
-function normalizeLink(token: InlineMarkdownToken): InlineNode[] {
-  const children = normalizeInlineTokens(token.tokens ?? []);
+function normalizeLink(token: InlineMarkdownToken, span: InlineSourceSpan | undefined): InlineNode[] {
+  const children = normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span));
   const href = token.href ?? '';
 
   if (!isAllowedLinkHref(href)) return children;
@@ -94,8 +132,23 @@ function normalizeLink(token: InlineMarkdownToken): InlineNode[] {
   // faithfully that is an invisible tappable region, so the target becomes its
   // own label — the same instinct behind mobile refusing markdown-it's
   // empty-alt image links (docs/specs/markdown-rendering.md §5).
-  const label = children.length > 0 ? children : [textNode(href)];
-  return [{ type: 'link', href, children: label }];
+  const label = children.length > 0 ? children : [textNode(href, span)];
+  return [span ? { type: 'link', href, children: label, src: span } : { type: 'link', href, children: label }];
+}
+
+/**
+ * The source offset the children of a container token start at, or undefined
+ * when source tracking is off. Children raws are contiguous inside the parent's
+ * raw, so the whole run is located once and each child then advances the cursor
+ * by its own length.
+ */
+function childSourceStart(
+  token: InlineMarkdownToken,
+  span: InlineSourceSpan | undefined,
+): number | undefined {
+  if (!span) return undefined;
+  const inner = (token.tokens ?? []).map((child) => child.raw).join('');
+  return span.start + contentOffset(token.raw, inner);
 }
 
 /**
@@ -130,6 +183,108 @@ export function flattenInlineNodes(nodes: InlineNode[]): string {
   return out;
 }
 
+/** How many characters of visible text a node contributes. */
+function renderedLength(node: InlineNode): number {
+  switch (node.type) {
+    case 'text':
+    case 'code':
+      return node.value.length;
+    // Counted, because a line break occupies one position for a caret just as
+    // the newline it came from does in the source.
+    case 'br':
+      return 1;
+    default:
+      return node.children.reduce((total, child) => total + renderedLength(child), 0);
+  }
+}
+
+/**
+ * Maps an offset in the *rendered* text back to an offset in the source.
+ *
+ * This is what lets a click on rendered item text open the editor with the
+ * caret where the user pointed: they clicked character 4 of `buy milk`, and the
+ * textarea behind it holds `buy **milk**`, where that character is at 6.
+ *
+ * Requires nodes produced with source tracking on (`normalizeInlineTokens(…, 0)`);
+ * without it there is nothing to map to and the source length is returned, which
+ * puts the caret at the end — the same place a swap with no mapping at all would.
+ *
+ * Exact for every construct whose visible text appears verbatim in its source,
+ * which is all of them bar two: a reconstructed literal image and an escape
+ * sequence render at a different length than they occupy, so an offset *inside*
+ * one lands within the construct rather than exactly on the character. Both are
+ * clamped to the construct, so the caret is never wildly wrong.
+ */
+export function inlineSourceOffset(
+  nodes: InlineNode[],
+  renderedOffset: number,
+  sourceLength: number,
+): number {
+  let consumed = 0;
+  // Where the last node that ended before `renderedOffset` finished, so a click
+  // past the end of everything lands after the last construct rather than at 0.
+  let lastEnd = 0;
+
+  function walk(list: InlineNode[]): number | null {
+    for (const node of list) {
+      if (node.type === 'strong' || node.type === 'em' || node.type === 'del' || node.type === 'link') {
+        const hit = walk(node.children);
+        if (hit !== null) return hit;
+      } else {
+        const length = renderedLength(node);
+        if (renderedOffset < consumed + length) {
+          const within = renderedOffset - consumed;
+          if (!node.src) return null;
+          return Math.min(node.src.start + within, node.src.end);
+        }
+        consumed += length;
+      }
+      if (node.src) lastEnd = node.src.end;
+    }
+    return null;
+  }
+
+  return walk(nodes) ?? Math.min(lastEnd || sourceLength, sourceLength);
+}
+
+/**
+ * Whether rendering `text` would show anything other than `text` itself.
+ *
+ * The webapp's editable row uses this to decide whether a row needs a rendered
+ * view at all. `buy milk` renders to `buy milk`, so swapping it for a
+ * non-editable copy of itself would be pure churn — an identical repaint, a
+ * height that has to be re-measured, and a caret that has to be mapped, all to
+ * arrive back where it started. Only a row whose author actually typed some
+ * markup pays for any of that.
+ *
+ * Deliberately compares the text rather than testing for formatting nodes: a
+ * node list can be all `text` and still differ from its source, because an
+ * escape (`\*`) renders without its backslash.
+ */
+export function inlineRendersAsSource(nodes: InlineNode[], text: string): boolean {
+  let rendered = '';
+
+  for (const node of nodes) {
+    switch (node.type) {
+      case 'text':
+        rendered += node.value;
+        break;
+      // A `br` is the one node whose rendering is not its source character for
+      // character on every client, but it stands for exactly the newline that
+      // produced it.
+      case 'br':
+        rendered += '\n';
+        break;
+      // Code renders in a different typeface, so it is a visible change even
+      // when the characters match.
+      default:
+        return false;
+    }
+  }
+
+  return rendered === text;
+}
+
 /**
  * Converts marked inline tokens into `InlineNode`s, degrading everything outside
  * the supported subset to literal text.
@@ -138,10 +293,22 @@ export function flattenInlineNodes(nodes: InlineNode[]): string {
  * renderer follows (docs/specs/markdown-rendering.md §3): unsupported syntax
  * that vanished would read as a bug rather than a limit.
  */
-export function normalizeInlineTokens(tokens: InlineMarkdownToken[]): InlineNode[] {
+export function normalizeInlineTokens(
+  tokens: InlineMarkdownToken[],
+  sourceStart?: number,
+): InlineNode[] {
   const nodes: InlineNode[] = [];
+  const tracking = sourceStart !== undefined;
+  let cursor = sourceStart ?? 0;
 
   for (const token of tokens) {
+    // The token's own span, and the span of just its visible content. They
+    // differ by the opening delimiter: `**milk**` against `milk`.
+    const span = tracking ? { start: cursor, end: cursor + token.raw.length } : undefined;
+    const contentSpan = (content: string): InlineSourceSpan | undefined =>
+      span ? { start: span.start + contentOffset(token.raw, content), end: span.end } : undefined;
+    if (span) cursor = span.end;
+
     switch (token.type) {
       case 'text':
       case 'escape': {
@@ -150,9 +317,10 @@ export function normalizeInlineTokens(tokens: InlineMarkdownToken[]): InlineNode
         // the unescaped source — escaping is the renderer's job, not this one's.
         const nested = token.tokens;
         if (nested && nested.length > 0) {
-          nodes.push(...normalizeInlineTokens(nested));
+          nodes.push(...normalizeInlineTokens(nested, childSourceStart(token, span)));
         } else {
-          nodes.push(textNode(token.text ?? ''));
+          const value = token.text ?? '';
+          nodes.push(textNode(value, contentSpan(value)));
         }
         break;
       }
@@ -160,49 +328,67 @@ export function normalizeInlineTokens(tokens: InlineMarkdownToken[]): InlineNode
       // Spelled out one per case: `token.type` is a plain string here, so a
       // shared arm would not narrow to the InlineNode literal union.
       case 'strong':
-        nodes.push({ type: 'strong', children: normalizeInlineTokens(token.tokens ?? []) });
+        nodes.push({
+          type: 'strong',
+          children: normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span)),
+          ...(span && { src: span }),
+        });
         break;
 
       case 'em':
-        nodes.push({ type: 'em', children: normalizeInlineTokens(token.tokens ?? []) });
+        nodes.push({
+          type: 'em',
+          children: normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span)),
+          ...(span && { src: span }),
+        });
         break;
 
       case 'del':
-        nodes.push({ type: 'del', children: normalizeInlineTokens(token.tokens ?? []) });
+        nodes.push({
+          type: 'del',
+          children: normalizeInlineTokens(token.tokens ?? [], childSourceStart(token, span)),
+          ...(span && { src: span }),
+        });
         break;
 
-      case 'codespan':
-        nodes.push({ type: 'code', value: token.text ?? '' });
+      case 'codespan': {
+        const value = token.text ?? '';
+        nodes.push({ type: 'code', value, ...(span && { src: contentSpan(value) }) });
         break;
+      }
 
       case 'link':
-        nodes.push(...normalizeLink(token));
+        nodes.push(...normalizeLink(token, span));
         break;
 
       case 'image':
         // Images are a gallery feature, never embedded (docs/specs/file-attachments.md).
-        nodes.push(textNode(formatLiteralImage(token.text ?? '', token.href ?? '', token.title)));
+        // Reconstructed rather than echoed, so the span covers the whole token
+        // and an offset inside it is approximate — see `inlineSourceOffset`.
+        nodes.push(textNode(formatLiteralImage(token.text ?? '', token.href ?? '', token.title), span));
         break;
 
-      case 'html':
+      case 'html': {
         // Raw HTML shows its own source. Only the tags lex as `html`; the text
         // between them stays ordinary text, which is exactly what the webapp's
         // block renderer produces for inline HTML today.
-        nodes.push(textNode(token.text ?? ''));
+        const value = token.text ?? '';
+        nodes.push(textNode(value, contentSpan(value)));
         break;
+      }
 
       case 'br':
         // Its own node rather than a "\n" text node: a literal newline collapses
         // to a space in HTML, so the webapp needs a real <br> while mobile wants
         // the newline. Neither can be derived from the other by the renderer.
-        nodes.push({ type: 'br' });
+        nodes.push({ type: 'br', ...(span && { src: span }) });
         break;
 
       default:
         // Block tokens cannot reach an inline lexer, so this is unreachable for
         // the syntax Jot supports. Emitting `raw` keeps the fallback consistent
         // with every other degradation rather than silently dropping content.
-        nodes.push(textNode(token.raw));
+        nodes.push(textNode(token.raw, span));
         break;
     }
   }
diff --git a/webapp/e2e/tests/keyboard-focus.spec.ts b/webapp/e2e/tests/keyboard-focus.spec.ts
index 14301187c..b43a93dce 100644
--- a/webapp/e2e/tests/keyboard-focus.spec.ts
+++ b/webapp/e2e/tests/keyboard-focus.spec.ts
@@ -246,6 +246,71 @@ test.describe('Keyboard drag and drop', () => {
     await dashboardPage.expectListItemValue(0, 'beta');
     await dashboardPage.expectListItemValue(1, 'alpha');
   });
+
+  test('reorders a row that is showing rendered Markdown', async ({ authenticatedUser, page, dashboardPage }) => {
+    void authenticatedUser;
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('DnD Rendered Note', ['**alpha**', 'beta']);
+    await dashboardPage.openNote('DnD Rendered Note');
+
+    // An unfocused row shows its rendered form, so the row dnd-kit measures is
+    // the rendered one. Reordering has to work from there, not just from the
+    // source form a freshly typed row happens to be in.
+    await expect(page.locator('[data-testid="list-item-rendered"]').first()).toBeVisible();
+    await keyboardReorder(page, page.getByRole('button', { name: 'Reorder item' }).first(), 'ArrowDown');
+
+    await dashboardPage.expectListItemValue(0, 'beta');
+    await dashboardPage.expectListItemValue(1, '**alpha**');
+  });
+});
+
+/**
+ * The row-level view/edit swap (docs/specs/markdown-rendering.md §1.2) makes
+ * "focused" and "editing" the same state, which is what keeps every keystroke
+ * handler on a real textarea. These pin that: the keys that move between rows
+ * have to keep working when the rows they move to and from are rendered.
+ */
+test.describe('List rows with rendered Markdown', () => {
+  test('splits and navigates between rendered rows with the keyboard', async ({ authenticatedUser, page, dashboardPage }) => {
+    void authenticatedUser;
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Rendered Keys Note', ['**alpha**', '**beta**']);
+    await dashboardPage.openNote('Rendered Keys Note');
+
+    // Both rows start rendered, and focusing one is what turns it back into a
+    // field — there is no separate "enter edit mode" step to forget.
+    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(2);
+    await dashboardPage.focusListItem(0);
+    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(1);
+
+    // Arrow down moves to the next row, which becomes a field in turn.
+    await page.keyboard.press('ArrowDown');
+    await dashboardPage.expectListItemFocused(1);
+    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(1);
+
+    // Enter at the end appends a row and focuses it; the row left behind
+    // renders again because it is no longer the focused one.
+    await page.keyboard.press('End');
+    await page.keyboard.press('Enter');
+    await dashboardPage.expectListItemCount(3);
+    await dashboardPage.expectListItemFocused(2);
+    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(2);
+  });
+
+  test('indents a rendered row with Tab', async ({ authenticatedUser, page, dashboardPage }) => {
+    void authenticatedUser;
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Rendered Indent Note', ['**parent**', '**child**']);
+    await dashboardPage.openNote('Rendered Indent Note');
+
+    const childRow = page.locator('[data-testid="list-item-row"]').nth(1);
+    const before = (await childRow.boundingBox())!.x;
+
+    await dashboardPage.focusListItem(1);
+    await page.keyboard.press('Tab');
+
+    await expect.poll(async () => (await childRow.boundingBox())!.x).toBeGreaterThan(before);
+  });
 });
 
 test.describe('Toast announcements', () => {
diff --git a/webapp/e2e/tests/markdown.spec.ts b/webapp/e2e/tests/markdown.spec.ts
index faf5d63e5..1b35bc809 100644
--- a/webapp/e2e/tests/markdown.spec.ts
+++ b/webapp/e2e/tests/markdown.spec.ts
@@ -1,3 +1,4 @@
+import type { Page } from '@playwright/test';
 import { test, expect } from '../fixtures';
 
 test.describe('Markdown note editing', () => {
@@ -160,7 +161,7 @@ test.describe('Markdown note editing', () => {
     await expect(preview.locator('a[href="https://example.com/docs"]')).toHaveText('docs');
   });
 
-  test('leaves block syntax literal in list items and keeps the editor row showing source', async ({ dashboardPage }) => {
+  test('leaves block syntax literal in list items and keeps the editor row showing source', async ({ page, dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Literal', [
       '# not a heading',
@@ -177,10 +178,21 @@ test.describe('Markdown note editing', () => {
     await expect(card).toContainText('call');
     await expect(card.locator('a')).toHaveCount(0);
 
-    // Reopening the note shows the raw source in the editable row — rendering
-    // there is #824, and this assertion is what will need updating when it lands.
+    // The editable row renders Markdown now (§1.2), and these three cases show
+    // the two halves of that. Literal source renders as itself, so those rows
+    // never swap at all and the field is what is on screen.
     await dashboardPage.openNote('Literal');
     await dashboardPage.expectListItemValue(0, '# not a heading');
+    const row = (i: number) => page.locator('[data-testid="list-item-row"]').nth(i);
+    await expect(row(0).getByTestId('list-item-rendered')).toHaveCount(0);
+    await expect(row(1).getByTestId('list-item-rendered')).toHaveCount(0);
+
+    // A link Jot will not follow does not: it keeps its label and loses its
+    // target (§3), so the rendered form differs from the source and the row
+    // swaps like any other. The `tel:` URL is in the field, one click away.
+    await expect(row(2).getByTestId('list-item-rendered')).toHaveText('call');
+    await expect(row(2).locator('a')).toHaveCount(0);
+    await dashboardPage.expectListItemValue(2, '[call](tel:+15550100)');
   });
 
   test('two-step Escape dismiss: first Escape collapses to preview, second Escape closes modal', async ({ page, dashboardPage }) => {
@@ -337,3 +349,114 @@ test.describe('Markdown note editing', () => {
     await expect(noteEditorPage.toolbar()).toHaveCount(0);
   });
 });
+
+/**
+ * The view/edit swap on a list-item row (docs/specs/markdown-rendering.md §1.2).
+ *
+ * This is the half the unit tests cannot reach: whether a click lands the caret
+ * where the user pointed, and whether the row keeps its size across the swap.
+ * Both need a real layout engine.
+ */
+test.describe('Markdown in list-item rows', () => {
+  test.beforeEach(async ({ authenticatedUser }) => {
+    void authenticatedUser;
+  });
+
+  /** The rendered form of the row at `index`, if it is showing one. */
+  const rendered = (page: Page, index: number) =>
+    page.locator('[data-testid="list-item-rendered"]').nth(index);
+
+  test('renders an item when it loses focus and shows source when clicked', async ({ page, dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Render Row Note', ['buy **milk**']);
+    await dashboardPage.openNote('Render Row Note');
+
+    // Unfocused: the markers are gone and the word is really bold.
+    await expect(rendered(page, 0)).toBeVisible();
+    await expect(rendered(page, 0).locator('strong')).toHaveText('milk');
+    await expect(rendered(page, 0)).toHaveText('buy milk');
+
+    // Clicking it hands over to the field, which holds the source.
+    await rendered(page, 0).click();
+    await expect(dashboardPage.listItemInput(0)).toBeFocused();
+    await expect(rendered(page, 0)).toHaveCount(0);
+    await dashboardPage.expectListItemValue(0, 'buy **milk**');
+
+    // And moving away renders it again — the acceptance criterion on #824.
+    await dashboardPage.listItemInput(0).blur();
+    await expect(rendered(page, 0)).toBeVisible();
+  });
+
+  test('puts the caret where the rendered text was clicked', async ({ page, dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Caret Note', ['buy **milk** today']);
+    await dashboardPage.openNote('Caret Note');
+
+    const caret = () => dashboardPage.listItemInput(0).evaluate(
+      (el: HTMLTextAreaElement) => el.selectionStart,
+    );
+
+    // Clicking the middle of the bold word must land inside `milk` in the
+    // source — offsets 6..10 of `buy **milk** today`. Without the mapping this
+    // is 0 (a bare focus()) or 18 (the end), so the assertion has real teeth.
+    await rendered(page, 0).locator('strong').click();
+    expect(await caret()).toBeGreaterThanOrEqual(6);
+    expect(await caret()).toBeLessThanOrEqual(10);
+
+    // And a click before the markers stays before them.
+    await dashboardPage.listItemInput(0).blur();
+    await rendered(page, 0).click({ position: { x: 2, y: 8 } });
+    expect(await caret()).toBeLessThan(4);
+  });
+
+  test('keeps the row the same height across the swap', async ({ page, dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Height Note', ['buy **milk**', 'second item']);
+    await dashboardPage.openNote('Height Note');
+
+    const row = page.locator('[data-testid="list-item-row"]').first();
+    const renderedHeight = (await row.boundingBox())!.height;
+
+    await rendered(page, 0).click();
+    await expect(dashboardPage.listItemInput(0)).toBeFocused();
+    const sourceHeight = (await row.boundingBox())!.height;
+
+    // Both forms are one line here, and they carry the same padding and
+    // wrapping, so the row must not resize at all. A regression in
+    // TEXT_LAYOUT_CLASSES shows up here as a few pixels either way.
+    expect(Math.abs(sourceHeight - renderedHeight)).toBeLessThan(1);
+  });
+
+  test('leaves an item with no Markdown as a live field', async ({ page, dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Plain Note', ['buy milk']);
+    await dashboardPage.openNote('Plain Note');
+
+    // Nothing to render that the field is not already showing, so the row never
+    // swaps and typing into it is exactly what it was before #824.
+    await expect(rendered(page, 0)).toHaveCount(0);
+    await expect(dashboardPage.listItemInput(0)).toBeVisible();
+  });
+
+  test('renders a completed item, line-through and all', async ({ page, dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Completed Note', ['buy **milk**']);
+    await dashboardPage.openNote('Completed Note');
+
+    await page.locator('[data-testid="list-item-row"]').first()
+      .getByRole('checkbox', { name: 'Item completed' }).check();
+
+    await expect(rendered(page, 0).locator('strong')).toHaveText('milk');
+  });
+
+  test('does not make a link out of an editable row', async ({ page, dashboardPage }) => {
+    await dashboardPage.goto();
+    await dashboardPage.createListNote('Link Row Note', ['see [docs](https://example.com)']);
+    await dashboardPage.openNote('Link Row Note');
+
+    // One click on the row already means "put the caret here" — see §1.2. The
+    // label survives, the target does not, and nothing looks followable.
+    await expect(rendered(page, 0)).toHaveText('see docs');
+    await expect(rendered(page, 0).locator('a')).toHaveCount(0);
+  });
+});
diff --git a/webapp/src/components/SortableItem.tsx b/webapp/src/components/SortableItem.tsx
index a9716a82b..9f15ca21a 100644
--- a/webapp/src/components/SortableItem.tsx
+++ b/webapp/src/components/SortableItem.tsx
@@ -1,10 +1,13 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useState, useEffect, useLayoutEffect, useMemo, useRef, useCallback } from 'react';
 import { X, UserPlus, GripVertical } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { VALIDATION, type User, type Collaborator } from '@jot/shared';
 import LetterAvatar from '@/components/LetterAvatar';
 import AssigneePicker from '@/components/AssigneePicker';
 import { indentOf, type ListItem } from '@/utils/noteItems';
+import { renderInlineItem } from '@/utils/markdown';
+import { sourceOffsetAtPoint } from '@/utils/inlineCaret';
+import { canAnimate } from '@/utils/motion';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
@@ -15,6 +18,27 @@ import { CSS } from '@dnd-kit/utilities';
 export const ROW_REVEAL_CLASSES =
   'opacity-0 pointer-events-none group-hover/item:opacity-100 group-hover/item:pointer-events-auto group-focus-within/item:opacity-100 group-focus-within/item:pointer-events-auto';
 
+// Everything that decides how much vertical space a line of item text takes:
+// width, padding, how it wraps, and how its box sits in the line. The rendered
+// view and the textarea it stands in for must carry all of it, or the row
+// changes height on the swap for no reason other than the two forms being laid
+// out differently.
+//
+// `inline-block` and `overflow-hidden` are the two that are not obvious, and
+// they only matter together. A textarea is an inline-block that baselines on its
+// bottom margin edge, so the line box around it reserves a further 7px of
+// descender space underneath — space that is part of every list row's height
+// today. A span reproduces the display easily but not the baseline: an
+// inline-block full of text baselines on *its own last line*, which puts it 7px
+// short. `overflow-hidden` is what moves a baseline back to the bottom margin
+// edge (CSS 2.1 §10.8.1), and it is why the two forms end up the same height.
+//
+// Font metrics are absent because both inherit them: Tailwind's preflight sets
+// `font: inherit` on form controls, which is the only reason a textarea agrees
+// with a span about line height at all.
+const TEXT_LAYOUT_CLASSES =
+  'inline-block overflow-hidden w-full pt-0 pb-1 pl-1 pr-0 whitespace-pre-wrap break-words align-baseline';
+
 export interface SortableItemProps {
   id: string;
   index: number;
@@ -47,8 +71,17 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
   const [showAssigneePicker, setShowAssigneePicker] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  // Focused and editing are the same state, deliberately: the row shows its
+  // Markdown rendered until you put the caret in it, and shows source for
+  // exactly as long as the caret is there. That is what keeps every keystroke
+  // handler below on a real textarea, with no render-mode duplicate of Tab,
+  // Enter or the suggestion arrows — and no focusable non-interactive element
+  // for a screen reader or axe to trip over.
+  const [isEditing, setIsEditing] = useState(false);
   const suggestionsRef = useRef<HTMLDivElement>(null);
   const listItemTextRef = useRef<HTMLTextAreaElement | null>(null);
+  const renderedRef = useRef<HTMLSpanElement>(null);
+  const textColumnRef = useRef<HTMLDivElement>(null);
   const closeAssigneePicker = useCallback(() => setShowAssigneePicker(false), []);
   const {
     attributes,
@@ -72,6 +105,12 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
   const assignedUser = item.assignedTo ? usersById?.get(item.assignedTo) : undefined;
   const showAssignUI = isShared && collaborators && collaborators.length > 0 && onAssignItem;
   const placeholder = item.text ? '' : t('note.itemPlaceholder');
+  // Kept as one string shared by both forms of the row rather than reasoned
+  // about twice: whatever a completed row looks like today, the rendered view
+  // and the textarea have to look the same as each other.
+  const textToneClasses = `text-gray-900 dark:text-white ${
+    isCompleted ? 'line-through text-gray-500 dark:text-gray-400' : ''
+  }`;
   const autoResizeListItemText = useCallback((textarea: HTMLTextAreaElement | null) => {
     if (!textarea) return;
     textarea.style.height = 'auto';
@@ -88,6 +127,69 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
     autoResizeListItemText(listItemTextRef.current);
   }, [item.text, autoResizeListItemText]);
 
+  // Links are live exactly where there is no caret to place. A read-only row is
+  // a display surface like the note card, so its links work; an editable row's
+  // do not, because one click there already means "put the caret here" and a
+  // second meaning on the same pixel has no way to resolve itself. See
+  // docs/specs/markdown-rendering.md §1.2.
+  const rendered = useMemo(
+    () => renderInlineItem(item.text, { links: readOnly }),
+    [item.text, readOnly],
+  );
+
+  // A row only swaps when rendering actually changes what is on screen. `buy
+  // milk` renders to `buy milk`, so a list with no Markdown in it keeps the
+  // always-live textarea it has always had, and pays for none of this.
+  const showRendered = rendered.formatted && (readOnly || !isEditing);
+  // Nothing to place a caret with, and no editing to return to: the bin's rows
+  // drop the textarea entirely rather than hiding a focusable copy of the text
+  // behind the rendered one, which would be both an extra tab stop and a second
+  // announcement of the same item.
+  const showTextarea = !(readOnly && showRendered);
+
+  // Height is measured before the swap and animated to afterwards. The two
+  // forms of a row wrap at different points once markers are involved, so a row
+  // can genuinely change height — and an unannounced change moves every row
+  // below it out from under the pointer.
+  const heightBeforeSwapRef = useRef<number | null>(null);
+  const captureSwapHeight = useCallback(() => {
+    heightBeforeSwapRef.current = textColumnRef.current?.getBoundingClientRect().height ?? null;
+  }, []);
+
+  const wasShowingRendered = useRef(showRendered);
+  useLayoutEffect(() => {
+    if (wasShowingRendered.current === showRendered) return;
+    wasShowingRendered.current = showRendered;
+
+    const from = heightBeforeSwapRef.current;
+    heightBeforeSwapRef.current = null;
+    const column = textColumnRef.current;
+    if (from === null || !canAnimate(column)) return;
+
+    const to = column.getBoundingClientRect().height;
+    // Sub-pixel differences are the common case — same content, same wrap — and
+    // animating those is a frame of work to move nothing.
+    if (Math.abs(to - from) < 1) return;
+    column.animate([{ height: `${from}px` }, { height: `${to}px` }], {
+      duration: 120,
+      easing: 'ease-out',
+    });
+  }, [showRendered]);
+
+  // Entering edit mode from a click has to place the caret itself: the browser
+  // would put it where the point falls in the *source*, and the user pointed at
+  // the rendered text.
+  const editFromPoint = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {
+    const textarea = listItemTextRef.current;
+    const container = renderedRef.current;
+    if (!textarea || !container) return;
+    e.preventDefault();
+    captureSwapHeight();
+    const offset = sourceOffsetAtPoint(container, rendered.nodes, item.text, e.clientX, e.clientY);
+    textarea.focus();
+    textarea.setSelectionRange(offset, offset);
+  }, [captureSwapHeight, item.text, rendered.nodes]);
+
   const suggestions = useMemo(() => {
     const trimmed = item.text.trim();
     if (!trimmed) return [];
@@ -157,6 +259,16 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
           title={t('note.reorderItem')}
           {...attributes}
           {...listeners}
+          // Grabbing the grip must not move focus off the row's textarea. If it
+          // did, the row would collapse to its rendered form on mousedown —
+          // changing its height in the same tick the PointerSensor activates and
+          // dnd-kit measures, so the drag would run against a rect for a height
+          // the row no longer has. Preventing the default keeps the caret where
+          // it was and the row the size dnd-kit measured.
+          //
+          // Only the mouse path needs this. A keyboard drag arrives by Tab, so
+          // the row has already collapsed and settled before Space starts it.
+          onMouseDown={(e) => e.preventDefault()}
           // gray-500, not gray-400: the note's colour is applied to the whole
           // modal panel, and the grip is a graphical control, so it needs 3:1
           // against the worst swatch (WCAG 1.4.11). gray-400 manages 1.8 there.
@@ -177,7 +289,8 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
         className={`h-4 w-4 text-blue-600 rounded mt-0.5 flex-shrink-0 ${readOnly ? 'cursor-default' : ''}`}
       />
       <div className="flex flex-1 items-start min-w-0">
-        <div className="relative min-w-0 flex-1">
+        <div ref={textColumnRef} className="relative min-w-0 flex-1">
+          {showTextarea && (
           <textarea
             data-testid="list-item-input"
             placeholder={placeholder}
@@ -185,8 +298,19 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
             autoCapitalize="sentences"
             readOnly={readOnly}
             aria-readonly={readOnly}
-            className={`w-full pt-0 pb-1 pl-1 pr-0 bg-transparent border-none outline-none min-w-0 resize-none overflow-hidden whitespace-pre-wrap break-words placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white ${
-              isCompleted ? 'line-through text-gray-500 dark:text-gray-400' : ''
+            // Never unmounted while the row is editable, only moved out of flow
+            // and faded out. Everything that reaches for a row imperatively —
+            // NoteModal's Enter-to-split, arrow navigation and "add item" focus,
+            // all of which go through `inputRef` — keeps working on a row that
+            // happens to be showing its rendered form, and the height the
+            // textarea comes up at was measured while it was on screen rather
+            // than at the moment of focus.
+            //
+            // `opacity-0` rather than `invisible` or `hidden`: both of those
+            // take an element out of the focus order, and `.focus()` on one
+            // silently does nothing.
+            className={`${TEXT_LAYOUT_CLASSES} bg-transparent border-none outline-none min-w-0 resize-none placeholder-gray-500 dark:placeholder-gray-400 ${textToneClasses} ${
+              showRendered ? 'absolute top-0 left-0 opacity-0 pointer-events-none' : ''
             }`}
             value={item.text}
             onInput={(e) => autoResizeListItemText(e.currentTarget)}
@@ -196,11 +320,17 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
               setSelectedSuggestionIndex(-1);
             }}
             onFocus={readOnly ? undefined : () => {
+              captureSwapHeight();
+              setIsEditing(true);
               if (suggestions.length > 0) setShowSuggestions(true);
             }}
             onBlur={(e) => {
               const related = e.relatedTarget as Node | null;
+              // Focus moving into the dropdown is still editing this row, so the
+              // row must not collapse out from under the option being clicked.
               if (suggestionsRef.current?.contains(related)) return;
+              captureSwapHeight();
+              setIsEditing(false);
               // Delay to allow touch tap on suggestion to fire click first
               setTimeout(() => {
                 setShowSuggestions(false);
@@ -276,6 +406,23 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
             onPaste={readOnly ? undefined : (e) => onPaste?.(index, e)}
             ref={setListItemTextRef}
           />
+          )}
+          {showRendered && (
+            <span
+              ref={renderedRef}
+              data-testid="list-item-rendered"
+              // The textarea behind it is the row's real control and carries the
+              // accessible name and the value, so this is decoration for anyone
+              // not looking at it — except on a read-only row, where there is no
+              // textarea and these links are the only way to reach the targets.
+              aria-hidden={showTextarea ? true : undefined}
+              onMouseDown={showTextarea ? editFromPoint : undefined}
+              className={`markdown-inline ${TEXT_LAYOUT_CLASSES} ${textToneClasses} ${
+                showTextarea ? 'cursor-text' : ''
+              }`}
+              dangerouslySetInnerHTML={{ __html: rendered.html }}
+            />
+          )}
           {suggestionsVisible && !isCompleted && !readOnly && (
             <div
               ref={suggestionsRef}
diff --git a/webapp/src/components/__tests__/SortableItem.test.tsx b/webapp/src/components/__tests__/SortableItem.test.tsx
index e919e16ab..4c7f9c5f2 100644
--- a/webapp/src/components/__tests__/SortableItem.test.tsx
+++ b/webapp/src/components/__tests__/SortableItem.test.tsx
@@ -1,7 +1,7 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { type ReactNode } from 'react';
-import SortableItem from '../SortableItem';
+import SortableItem, { type SortableItemProps } from '../SortableItem';
 import type { ListItem } from '@/utils/noteItems';
 
 vi.mock('@dnd-kit/sortable', () => ({
@@ -135,3 +135,111 @@ describe('SortableItem suggestion highlight', () => {
     expect(input()).not.toHaveAttribute('aria-activedescendant');
   });
 });
+
+/**
+ * The view/edit swap (docs/specs/markdown-rendering.md §1.2).
+ *
+ * These assert the *state machine* — which of the two forms is on screen, and
+ * that the textarea survives the swap. What they cannot assert is the part that
+ * needs a layout engine: the caret offset a click maps to, and the height the
+ * row settles at. Both are covered in webapp/e2e/tests/markdown.spec.ts.
+ */
+describe('SortableItem rendered/source swap', () => {
+  function renderRow(text: string, props: Partial<SortableItemProps> = {}) {
+    return render(
+      <SortableItem
+        id="item-1"
+        index={0}
+        item={{ ...item, text }}
+        onUpdateListItem={vi.fn().mockResolvedValue(undefined)}
+        onRemoveListItem={vi.fn()}
+        {...props}
+      />
+    );
+  }
+
+  const renderedView = () => screen.queryByTestId('list-item-rendered');
+  const textarea = () => screen.queryByTestId('list-item-input');
+
+  it('shows the rendered form of an unfocused row', () => {
+    renderRow('buy **milk**');
+
+    expect(renderedView()).toBeInTheDocument();
+    expect(renderedView()!.innerHTML).toBe('buy <strong>milk</strong>');
+    // The source is still in the field behind it, which is what every
+    // imperative focus path in NoteModal reaches for.
+    expect(textarea()).toHaveValue('buy **milk**');
+  });
+
+  it('shows source while the row is focused and renders again on blur', () => {
+    renderRow('buy **milk**');
+
+    fireEvent.focus(textarea()!);
+    expect(renderedView()).not.toBeInTheDocument();
+
+    fireEvent.blur(textarea()!);
+    expect(renderedView()).toBeInTheDocument();
+  });
+
+  it('leaves a row with no Markdown in it alone', () => {
+    // Nothing to show that the textarea is not already showing, so the row
+    // keeps the always-live input it had before any of this.
+    renderRow('buy milk');
+    expect(renderedView()).not.toBeInTheDocument();
+  });
+
+  it('leaves block syntax and literal source alone too', () => {
+    // Both render as themselves (§2.1), so neither is worth a swap.
+    renderRow('# not a heading');
+    expect(renderedView()).not.toBeInTheDocument();
+
+    cleanup();
+    renderRow('see ![alt](https://example.com/y.png)');
+    expect(renderedView()).not.toBeInTheDocument();
+  });
+
+  it('renders an empty row as its placeholder, not as an empty span', () => {
+    renderRow('');
+    expect(renderedView()).not.toBeInTheDocument();
+    expect(textarea()).toHaveAttribute('placeholder', 'List item...');
+  });
+
+  it('moves focus into the field when the rendered form is clicked', () => {
+    renderRow('buy **milk**');
+
+    fireEvent.mouseDown(renderedView()!);
+
+    expect(textarea()).toHaveFocus();
+    expect(renderedView()).not.toBeInTheDocument();
+  });
+
+  it('keeps rendering a completed row', () => {
+    // Decision on #824 question 7: completed rows render, and the collision
+    // between the row's line-through and ~~strike~~ is accepted (§2.1).
+    renderRow('~~buy~~ milk', { isCompleted: true });
+    expect(renderedView()!.innerHTML).toBe('<del>buy</del> milk');
+  });
+
+  it('drops the hidden field entirely on a read-only row', () => {
+    // No caret to place, so a focusable copy of the text behind the rendered
+    // one would be an extra tab stop announcing the same item twice.
+    renderRow('buy **milk**', { readOnly: true });
+
+    expect(renderedView()).toBeInTheDocument();
+    expect(textarea()).not.toBeInTheDocument();
+    expect(renderedView()).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('links only on the row that has no caret to place', () => {
+    renderRow('[docs](https://example.com)', { readOnly: true });
+    expect(renderedView()!.querySelector('a')).not.toBeNull();
+
+    cleanup();
+    renderRow('[docs](https://example.com)');
+    // Editable: one click already means "put the caret here", so the label
+    // renders as text and nothing on the row looks followable.
+    expect(renderedView()!.querySelector('a')).toBeNull();
+    expect(renderedView()!.textContent).toBe('docs');
+    expect(renderedView()).toHaveAttribute('aria-hidden', 'true');
+  });
+});
diff --git a/webapp/src/utils/__tests__/inlineCaret.test.ts b/webapp/src/utils/__tests__/inlineCaret.test.ts
new file mode 100644
index 000000000..ae890d1f9
--- /dev/null
+++ b/webapp/src/utils/__tests__/inlineCaret.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { renderedOffsetOf, sourceOffsetAtPoint } from '../inlineCaret';
+import { renderInlineItem } from '../markdown';
+
+// Only the DOM-position half is testable here: jsdom has no layout, so it
+// implements neither caretPositionFromPoint nor caretRangeFromPoint and there
+// is no point to resolve. The point-to-position half is exercised for real in
+// webapp/e2e/tests/markdown.spec.ts.
+
+/** A container holding the rendered form of `text`, as the row renders it. */
+function renderedContainer(text: string): HTMLElement {
+  const span = document.createElement('span');
+  span.innerHTML = renderInlineItem(text, { links: false }).html;
+  document.body.appendChild(span);
+  return span;
+}
+
+/** The text node at `index` in document order within `container`. */
+function textNodeAt(container: HTMLElement, index: number): Text {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let found: Node | null = walker.nextNode();
+  for (let i = 0; i < index; i++) found = walker.nextNode();
+  if (!found) throw new Error(`no text node at index ${index}`);
+  return found as Text;
+}
+
+describe('renderedOffsetOf', () => {
+  it('counts the text before a position in a later element', () => {
+    // "buy <strong>milk</strong>" — the m of milk is the 5th character shown.
+    const container = renderedContainer('buy **milk**');
+    expect(renderedOffsetOf(container, textNodeAt(container, 1), 0)).toBe(4);
+    expect(renderedOffsetOf(container, textNodeAt(container, 1), 2)).toBe(6);
+  });
+
+  it('counts a line break as one character', () => {
+    // A <br> contributes no text node, so a walk that only counted text would
+    // put everything after the break one short — and inlineSourceOffset counts
+    // the br node as one, so the two would disagree.
+    const container = renderedContainer('a\nb');
+    expect(container.innerHTML).toBe('a<br>b');
+    expect(renderedOffsetOf(container, textNodeAt(container, 1), 0)).toBe(2);
+  });
+
+  it('reads an element position as the text that precedes it', () => {
+    // What the browser returns for a click past the end of the line.
+    const container = renderedContainer('buy **milk**');
+    expect(renderedOffsetOf(container, container, 2)).toBe(8);
+  });
+
+  it('rejects a node from outside the container', () => {
+    const container = renderedContainer('buy **milk**');
+    const stray = document.createElement('span');
+    expect(renderedOffsetOf(container, stray, 0)).toBeNull();
+  });
+});
+
+describe('sourceOffsetAtPoint', () => {
+  it('falls back to the end of the source when the browser cannot resolve a point', () => {
+    // jsdom implements neither caret API, which is the same position a browser
+    // that fails to resolve the point leaves us in: no worse than a swap with
+    // no mapping at all.
+    const text = 'buy **milk**';
+    const { nodes } = renderInlineItem(text, { links: false });
+    expect(sourceOffsetAtPoint(renderedContainer(text), nodes, text, 10, 10)).toBe(text.length);
+  });
+});
diff --git a/webapp/src/utils/inlineCaret.ts b/webapp/src/utils/inlineCaret.ts
new file mode 100644
index 000000000..5dd114bdc
--- /dev/null
+++ b/webapp/src/utils/inlineCaret.ts
@@ -0,0 +1,95 @@
+import { inlineSourceOffset, type InlineNode } from '@jot/shared';
+
+/**
+ * Turning a click on rendered list-item text into a caret position in the
+ * source behind it.
+ *
+ * The editable row shows rendered Markdown until it is focused, so a click has
+ * to answer a question a plain textarea answers for itself: the user pointed at
+ * character 4 of `buy milk`, and the field holds `buy **milk**`, where that
+ * character is at 6. Without this the caret lands at 0 on every click — which is
+ * what the text-note editor does today, and is tolerable there only because it
+ * happens once per note rather than once per row.
+ *
+ * Two halves, kept separate because only one of them can be tested without a
+ * layout engine: the browser maps a point to a DOM position, and this module
+ * maps that position to an offset in the source.
+ */
+
+/**
+ * `caretPositionFromPoint` is the standard spelling and `caretRangeFromPoint`
+ * the WebKit one. Declared structurally rather than relied on from lib.dom, so
+ * that a browser missing both is a plain feature test rather than a type error.
+ */
+interface CaretPositionSource {
+  caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+  caretRangeFromPoint?: (x: number, y: number) => { startContainer: Node; startOffset: number } | null;
+}
+
+/**
+ * How many characters of visible text precede (`node`, `offset`) within
+ * `container`, or null if that position is not inside it.
+ *
+ * Counts a `<br>` as one character so the total lines up with what
+ * `inlineSourceOffset` counts for a `br` node — the two walks have to agree on
+ * what a line break costs or every offset after the first newline is wrong.
+ */
+export function renderedOffsetOf(container: HTMLElement, node: Node, offset: number): number | null {
+  if (!container.contains(node)) return null;
+
+  const walker = container.ownerDocument.createTreeWalker(
+    container,
+    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+  );
+
+  let consumed = 0;
+  for (let current = walker.nextNode(); current !== null; current = walker.nextNode()) {
+    if (current === node) {
+      // An element target means the browser pointed at a gap between children
+      // rather than into text — past the end of a line, most often. Its offset
+      // is a child index, not a character index, so there is nothing to add.
+      return current.nodeType === Node.TEXT_NODE ? consumed + offset : consumed;
+    }
+    if (current.nodeType === Node.TEXT_NODE) {
+      consumed += (current as Text).length;
+    } else if ((current as Element).tagName === 'BR') {
+      consumed += 1;
+    }
+  }
+
+  // The position is inside `container` but the walk never reached it, which
+  // means `node` is the container itself with a child index for an offset.
+  return node === container ? consumed : null;
+}
+
+/**
+ * The offset in `source` that a click at (`clientX`, `clientY`) points at,
+ * given the rendered form of `source` in `container`.
+ *
+ * Falls back to the end of the source whenever the browser cannot resolve the
+ * point — including under jsdom, which implements neither API. That is the same
+ * place the caret would land with no mapping at all, so a fallback costs
+ * precision rather than correctness.
+ */
+export function sourceOffsetAtPoint(
+  container: HTMLElement,
+  nodes: InlineNode[],
+  source: string,
+  clientX: number,
+  clientY: number,
+): number {
+  const doc = container.ownerDocument as Document & CaretPositionSource;
+
+  const position = doc.caretPositionFromPoint
+    ? doc.caretPositionFromPoint(clientX, clientY)
+    : doc.caretRangeFromPoint?.(clientX, clientY);
+  if (!position) return source.length;
+
+  const node = 'offsetNode' in position ? position.offsetNode : position.startContainer;
+  const offset = 'offsetNode' in position ? position.offset : position.startOffset;
+
+  const rendered = renderedOffsetOf(container, node, offset);
+  if (rendered === null) return source.length;
+
+  return inlineSourceOffset(nodes, rendered, source.length);
+}
diff --git a/webapp/src/utils/markdown.ts b/webapp/src/utils/markdown.ts
index 098c17fa0..0bb2f2d18 100644
--- a/webapp/src/utils/markdown.ts
+++ b/webapp/src/utils/markdown.ts
@@ -5,6 +5,7 @@ import {
   normalizeBlockTokens,
   normalizeInlineTokens,
   flattenInlineNodes,
+  inlineRendersAsSource,
   BLOCK_LEXER_OPTIONS,
   INLINE_LEXER_OPTIONS,
   type BlockNode,
@@ -214,12 +215,54 @@ export function renderInlineMarkdown(
 ): string {
   if (!text.trim()) return '';
   const nodes = normalizeInlineTokens(Lexer.lexInline(text, INLINE_LEXER_OPTIONS));
-  return DOMPurify.sanitize(renderInlineNodes(nodes), {
+  return sanitizeInline(renderInlineNodes(nodes), links);
+}
+
+function sanitizeInline(html: string, links: boolean): string {
+  return DOMPurify.sanitize(html, {
     ALLOWED_TAGS: links ? INLINE_ALLOWED_TAGS : INLINE_NO_LINK_TAGS,
     ALLOWED_ATTR,
   });
 }
 
+export interface InlineItemRender {
+  /** Sanitized HTML, identical to what `renderInlineMarkdown` produces. */
+  html: string;
+  /**
+   * The nodes the HTML was built from, carrying source spans — the editable row
+   * needs them to map a click on the rendered text back to a caret position.
+   */
+  nodes: InlineNode[];
+  /**
+   * Whether rendering changed anything. False for `buy milk`, true for
+   * `buy **milk**`. The editable row only swaps in a rendered view when this is
+   * true, so a list with no Markdown in it behaves exactly as it did before.
+   */
+  formatted: boolean;
+}
+
+/**
+ * Renders one item's text *and* reports what the editable row needs to know
+ * about it: whether a rendered view is worth showing, and where each rendered
+ * character came from.
+ *
+ * Separate from `renderInlineMarkdown` because the display-only surfaces — note
+ * cards, the collapsed-completed label — want the string and nothing else, and
+ * lexing with source tracking on for them would be work with no reader.
+ */
+export function renderInlineItem(
+  text: string,
+  { links = true }: MarkdownRenderOptions = {},
+): InlineItemRender {
+  if (!text.trim()) return { html: '', nodes: [], formatted: false };
+  const nodes = normalizeInlineTokens(Lexer.lexInline(text, INLINE_LEXER_OPTIONS), 0);
+  return {
+    html: sanitizeInline(renderInlineNodes(nodes), links),
+    nodes,
+    formatted: !inlineRendersAsSource(nodes, text),
+  };
+}
+
 /**
  * The same item text as `renderInlineMarkdown` produces, with the formatting
  * dropped — for an `aria-label`, which must say what the eye sees rather than

From b5d97e7df43e366b8688c3542fa8fc17cc6c3e14 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Aug 2026 13:48:12 +0000
Subject: [PATCH 2/4] Address review: page-object locators, element caret
 positions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two review findings, both valid.

DashboardPage gains listItemRow and listItemRendered alongside its existing
listItemInput, and the specs call those instead of raw data-testid selectors.
The row-scoped form is kept where it matters: in the literal-syntax test only
one of three rows renders, so a global nth() would point at the wrong row.

renderedOffsetOf mishandled an element position. A TreeWalker never yields its
own root, so `node === container` fell out of the loop and returned the total
text length, discarding the offset entirely — (container, 1) on
`buy <strong>milk</strong>` gave 8 where it should give 4. An element offset is
a child index, so it is now resolved to the first unconsumed node before the
walk, which handles a nested element's child index by the same path.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QuVeVda1EiJrJrdzsybRAr
---
 webapp/e2e/pages/DashboardPage.ts             | 14 +++++
 webapp/e2e/tests/keyboard-focus.spec.ts       | 12 ++--
 webapp/e2e/tests/markdown.spec.ts             | 58 +++++++++----------
 .../src/utils/__tests__/inlineCaret.test.ts   | 17 +++++-
 webapp/src/utils/inlineCaret.ts               | 42 +++++++++++---
 5 files changed, 95 insertions(+), 48 deletions(-)

diff --git a/webapp/e2e/pages/DashboardPage.ts b/webapp/e2e/pages/DashboardPage.ts
index 5ab419444..79c361877 100644
--- a/webapp/e2e/pages/DashboardPage.ts
+++ b/webapp/e2e/pages/DashboardPage.ts
@@ -82,6 +82,20 @@ export class DashboardPage {
     return this.page.locator('[data-testid="list-item-input"]').nth(index);
   }
 
+  listItemRow(index: number): Locator {
+    return this.page.locator('[data-testid="list-item-row"]').nth(index);
+  }
+
+  /**
+   * The rendered form of the row at `index`, present only while that row is
+   * showing Markdown rather than source (docs/specs/markdown-rendering.md §1.2).
+   * Resolves to nothing for a row whose text renders as itself, so assert
+   * `toHaveCount(0)` rather than expecting it to be absent from the page.
+   */
+  listItemRendered(index: number): Locator {
+    return this.page.locator('[data-testid="list-item-rendered"]').nth(index);
+  }
+
   async focusListItem(index: number) {
     await this.listItemInput(index).focus();
   }
diff --git a/webapp/e2e/tests/keyboard-focus.spec.ts b/webapp/e2e/tests/keyboard-focus.spec.ts
index 5704f2873..76fcbdb3b 100644
--- a/webapp/e2e/tests/keyboard-focus.spec.ts
+++ b/webapp/e2e/tests/keyboard-focus.spec.ts
@@ -258,7 +258,7 @@ test.describe('Keyboard drag and drop', () => {
     // An unfocused row shows its rendered form, so the row dnd-kit measures is
     // the rendered one. Reordering has to work from there, not just from the
     // source form a freshly typed row happens to be in.
-    await expect(page.locator('[data-testid="list-item-rendered"]').first()).toBeVisible();
+    await expect(dashboardPage.listItemRendered(0)).toBeVisible();
     await keyboardReorder(page, page.getByRole('button', { name: 'Reorder item' }).first(), 'ArrowDown');
 
     await dashboardPage.expectListItemValue(0, 'beta');
@@ -281,14 +281,14 @@ test.describe('List rows with rendered Markdown', () => {
 
     // Both rows start rendered, and focusing one is what turns it back into a
     // field — there is no separate "enter edit mode" step to forget.
-    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(2);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(2);
     await dashboardPage.focusListItem(0);
-    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(1);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(1);
 
     // Arrow down moves to the next row, which becomes a field in turn.
     await page.keyboard.press('ArrowDown');
     await dashboardPage.expectListItemFocused(1);
-    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(1);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(1);
 
     // Enter at the end appends a row and focuses it; the row left behind
     // renders again because it is no longer the focused one.
@@ -296,7 +296,7 @@ test.describe('List rows with rendered Markdown', () => {
     await page.keyboard.press('Enter');
     await dashboardPage.expectListItemCount(3);
     await dashboardPage.expectListItemFocused(2);
-    await expect(page.locator('[data-testid="list-item-rendered"]')).toHaveCount(2);
+    await expect(page.getByTestId('list-item-rendered')).toHaveCount(2);
   });
 
   test('indents a rendered row with Tab', async ({ authenticatedUser, page, dashboardPage }) => {
@@ -305,7 +305,7 @@ test.describe('List rows with rendered Markdown', () => {
     await dashboardPage.createListNote('Rendered Indent Note', ['**parent**', '**child**']);
     await dashboardPage.openNote('Rendered Indent Note');
 
-    const childRow = page.locator('[data-testid="list-item-row"]').nth(1);
+    const childRow = dashboardPage.listItemRow(1);
     const before = (await childRow.boundingBox())!.x;
 
     await dashboardPage.focusListItem(1);
diff --git a/webapp/e2e/tests/markdown.spec.ts b/webapp/e2e/tests/markdown.spec.ts
index e2e1896fe..f618cf289 100644
--- a/webapp/e2e/tests/markdown.spec.ts
+++ b/webapp/e2e/tests/markdown.spec.ts
@@ -1,4 +1,3 @@
-import type { Page } from '@playwright/test';
 import { test, expect } from '../fixtures';
 
 test.describe('Markdown note editing', () => {
@@ -161,7 +160,7 @@ test.describe('Markdown note editing', () => {
     await expect(preview.locator('a[href="https://example.com/docs"]')).toHaveText('docs');
   });
 
-  test('leaves block syntax literal in list items and keeps the editor row showing source', async ({ page, dashboardPage }) => {
+  test('leaves block syntax literal in list items and keeps the editor row showing source', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Literal', [
       '# not a heading',
@@ -183,15 +182,14 @@ test.describe('Markdown note editing', () => {
     // never swap at all and the field is what is on screen.
     await dashboardPage.openNote('Literal');
     await dashboardPage.expectListItemValue(0, '# not a heading');
-    const row = (i: number) => page.locator('[data-testid="list-item-row"]').nth(i);
-    await expect(row(0).getByTestId('list-item-rendered')).toHaveCount(0);
-    await expect(row(1).getByTestId('list-item-rendered')).toHaveCount(0);
+    await expect(dashboardPage.listItemRow(0).getByTestId('list-item-rendered')).toHaveCount(0);
+    await expect(dashboardPage.listItemRow(1).getByTestId('list-item-rendered')).toHaveCount(0);
 
     // A link Jot will not follow does not: it keeps its label and loses its
     // target (§3), so the rendered form differs from the source and the row
     // swaps like any other. The `tel:` URL is in the field, one click away.
-    await expect(row(2).getByTestId('list-item-rendered')).toHaveText('call');
-    await expect(row(2).locator('a')).toHaveCount(0);
+    await expect(dashboardPage.listItemRow(2).getByTestId('list-item-rendered')).toHaveText('call');
+    await expect(dashboardPage.listItemRow(2).locator('a')).toHaveCount(0);
     await dashboardPage.expectListItemValue(2, '[call](tel:+15550100)');
   });
 
@@ -361,32 +359,28 @@ test.describe('Markdown in list-item rows', () => {
     void authenticatedUser;
   });
 
-  /** The rendered form of the row at `index`, if it is showing one. */
-  const rendered = (page: Page, index: number) =>
-    page.locator('[data-testid="list-item-rendered"]').nth(index);
-
-  test('renders an item when it loses focus and shows source when clicked', async ({ page, dashboardPage }) => {
+  test('renders an item when it loses focus and shows source when clicked', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Render Row Note', ['buy **milk**']);
     await dashboardPage.openNote('Render Row Note');
 
     // Unfocused: the markers are gone and the word is really bold.
-    await expect(rendered(page, 0)).toBeVisible();
-    await expect(rendered(page, 0).locator('strong')).toHaveText('milk');
-    await expect(rendered(page, 0)).toHaveText('buy milk');
+    await expect(dashboardPage.listItemRendered(0)).toBeVisible();
+    await expect(dashboardPage.listItemRendered(0).locator('strong')).toHaveText('milk');
+    await expect(dashboardPage.listItemRendered(0)).toHaveText('buy milk');
 
     // Clicking it hands over to the field, which holds the source.
-    await rendered(page, 0).click();
+    await dashboardPage.listItemRendered(0).click();
     await expect(dashboardPage.listItemInput(0)).toBeFocused();
-    await expect(rendered(page, 0)).toHaveCount(0);
+    await expect(dashboardPage.listItemRendered(0)).toHaveCount(0);
     await dashboardPage.expectListItemValue(0, 'buy **milk**');
 
     // And moving away renders it again — the acceptance criterion on #824.
     await dashboardPage.listItemInput(0).blur();
-    await expect(rendered(page, 0)).toBeVisible();
+    await expect(dashboardPage.listItemRendered(0)).toBeVisible();
   });
 
-  test('puts the caret where the rendered text was clicked', async ({ page, dashboardPage }) => {
+  test('puts the caret where the rendered text was clicked', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Caret Note', ['buy **milk** today']);
     await dashboardPage.openNote('Caret Note');
@@ -398,25 +392,25 @@ test.describe('Markdown in list-item rows', () => {
     // Clicking the middle of the bold word must land inside `milk` in the
     // source — offsets 6..10 of `buy **milk** today`. Without the mapping this
     // is 0 (a bare focus()) or 18 (the end), so the assertion has real teeth.
-    await rendered(page, 0).locator('strong').click();
+    await dashboardPage.listItemRendered(0).locator('strong').click();
     expect(await caret()).toBeGreaterThanOrEqual(6);
     expect(await caret()).toBeLessThanOrEqual(10);
 
     // And a click before the markers stays before them.
     await dashboardPage.listItemInput(0).blur();
-    await rendered(page, 0).click({ position: { x: 2, y: 8 } });
+    await dashboardPage.listItemRendered(0).click({ position: { x: 2, y: 8 } });
     expect(await caret()).toBeLessThan(4);
   });
 
-  test('keeps the row the same height across the swap', async ({ page, dashboardPage }) => {
+  test('keeps the row the same height across the swap', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Height Note', ['buy **milk**', 'second item']);
     await dashboardPage.openNote('Height Note');
 
-    const row = page.locator('[data-testid="list-item-row"]').first();
+    const row = dashboardPage.listItemRow(0);
     const renderedHeight = (await row.boundingBox())!.height;
 
-    await rendered(page, 0).click();
+    await dashboardPage.listItemRendered(0).click();
     await expect(dashboardPage.listItemInput(0)).toBeFocused();
     const sourceHeight = (await row.boundingBox())!.height;
 
@@ -426,36 +420,36 @@ test.describe('Markdown in list-item rows', () => {
     expect(Math.abs(sourceHeight - renderedHeight)).toBeLessThan(1);
   });
 
-  test('leaves an item with no Markdown as a live field', async ({ page, dashboardPage }) => {
+  test('leaves an item with no Markdown as a live field', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Plain Note', ['buy milk']);
     await dashboardPage.openNote('Plain Note');
 
     // Nothing to render that the field is not already showing, so the row never
     // swaps and typing into it is exactly what it was before #824.
-    await expect(rendered(page, 0)).toHaveCount(0);
+    await expect(dashboardPage.listItemRendered(0)).toHaveCount(0);
     await expect(dashboardPage.listItemInput(0)).toBeVisible();
   });
 
-  test('renders a completed item, line-through and all', async ({ page, dashboardPage }) => {
+  test('renders a completed item, line-through and all', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Completed Note', ['buy **milk**']);
     await dashboardPage.openNote('Completed Note');
 
-    await page.locator('[data-testid="list-item-row"]').first()
+    await dashboardPage.listItemRow(0)
       .getByRole('checkbox', { name: 'Item completed' }).check();
 
-    await expect(rendered(page, 0).locator('strong')).toHaveText('milk');
+    await expect(dashboardPage.listItemRendered(0).locator('strong')).toHaveText('milk');
   });
 
-  test('does not make a link out of an editable row', async ({ page, dashboardPage }) => {
+  test('does not make a link out of an editable row', async ({ dashboardPage }) => {
     await dashboardPage.goto();
     await dashboardPage.createListNote('Link Row Note', ['see [docs](https://example.com)']);
     await dashboardPage.openNote('Link Row Note');
 
     // One click on the row already means "put the caret here" — see §1.2. The
     // label survives, the target does not, and nothing looks followable.
-    await expect(rendered(page, 0)).toHaveText('see docs');
-    await expect(rendered(page, 0).locator('a')).toHaveCount(0);
+    await expect(dashboardPage.listItemRendered(0)).toHaveText('see docs');
+    await expect(dashboardPage.listItemRendered(0).locator('a')).toHaveCount(0);
   });
 });
diff --git a/webapp/src/utils/__tests__/inlineCaret.test.ts b/webapp/src/utils/__tests__/inlineCaret.test.ts
index ae890d1f9..ead5fa62c 100644
--- a/webapp/src/utils/__tests__/inlineCaret.test.ts
+++ b/webapp/src/utils/__tests__/inlineCaret.test.ts
@@ -41,12 +41,25 @@ describe('renderedOffsetOf', () => {
     expect(renderedOffsetOf(container, textNodeAt(container, 1), 0)).toBe(2);
   });
 
-  it('reads an element position as the text that precedes it', () => {
-    // What the browser returns for a click past the end of the line.
+  it('resolves an element position against its children, not as a total', () => {
+    // The browser returns an element position when the point falls between
+    // children. `buy <strong>milk</strong>` has two, so offset 1 is the gap
+    // before the <strong> — 4 characters in, not the 8 of the whole container.
     const container = renderedContainer('buy **milk**');
+    expect(renderedOffsetOf(container, container, 0)).toBe(0);
+    expect(renderedOffsetOf(container, container, 1)).toBe(4);
+    // Past the last child: everything precedes it. This is the common one, a
+    // click past the end of the line.
     expect(renderedOffsetOf(container, container, 2)).toBe(8);
   });
 
+  it('resolves an element position inside a nested element', () => {
+    const container = renderedContainer('buy **milk** today');
+    const strong = container.querySelector('strong')!;
+    expect(renderedOffsetOf(container, strong, 0)).toBe(4);
+    expect(renderedOffsetOf(container, strong, 1)).toBe(8);
+  });
+
   it('rejects a node from outside the container', () => {
     const container = renderedContainer('buy **milk**');
     const stray = document.createElement('span');
diff --git a/webapp/src/utils/inlineCaret.ts b/webapp/src/utils/inlineCaret.ts
index 5dd114bdc..ce06bdb9d 100644
--- a/webapp/src/utils/inlineCaret.ts
+++ b/webapp/src/utils/inlineCaret.ts
@@ -26,6 +26,27 @@ interface CaretPositionSource {
   caretRangeFromPoint?: (x: number, y: number) => { startContainer: Node; startOffset: number } | null;
 }
 
+/**
+ * The first node in document order that a DOM position has *not* consumed, or
+ * null when the position is past everything inside `root`.
+ *
+ * A position is (node, offset), and offset means two different things depending
+ * on the node: a character index in a text node, a *child index* in an element.
+ * Resolving both to "the next unconsumed node" is what lets one traversal below
+ * measure either kind.
+ */
+function boundaryNodeOf(root: Node, node: Node, offset: number): Node | null {
+  if (node.nodeType === Node.TEXT_NODE) return node;
+  if (offset < node.childNodes.length) return node.childNodes[offset] ?? null;
+
+  // Past the last child: everything inside `node` is consumed, so the boundary
+  // is whatever follows its subtree.
+  for (let current: Node | null = node; current && current !== root; current = current.parentNode) {
+    if (current.nextSibling) return current.nextSibling;
+  }
+  return null;
+}
+
 /**
  * How many characters of visible text precede (`node`, `offset`) within
  * `container`, or null if that position is not inside it.
@@ -33,10 +54,17 @@ interface CaretPositionSource {
  * Counts a `<br>` as one character so the total lines up with what
  * `inlineSourceOffset` counts for a `br` node — the two walks have to agree on
  * what a line break costs or every offset after the first newline is wrong.
+ *
+ * The browser hands back an *element* position whenever the point falls between
+ * children rather than inside text — past the end of a line, most often, but
+ * also in the gap before a `<strong>`. Its offset is a child index, so it has
+ * to be resolved against the children rather than added to a character count or
+ * ignored: (container, 1) on `buy <strong>milk</strong>` means 4, not 8.
  */
 export function renderedOffsetOf(container: HTMLElement, node: Node, offset: number): number | null {
   if (!container.contains(node)) return null;
 
+  const boundary = boundaryNodeOf(container, node, offset);
   const walker = container.ownerDocument.createTreeWalker(
     container,
     NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
@@ -44,11 +72,8 @@ export function renderedOffsetOf(container: HTMLElement, node: Node, offset: num
 
   let consumed = 0;
   for (let current = walker.nextNode(); current !== null; current = walker.nextNode()) {
-    if (current === node) {
-      // An element target means the browser pointed at a gap between children
-      // rather than into text — past the end of a line, most often. Its offset
-      // is a child index, not a character index, so there is nothing to add.
-      return current.nodeType === Node.TEXT_NODE ? consumed + offset : consumed;
+    if (current === boundary) {
+      return node.nodeType === Node.TEXT_NODE ? consumed + offset : consumed;
     }
     if (current.nodeType === Node.TEXT_NODE) {
       consumed += (current as Text).length;
@@ -57,9 +82,10 @@ export function renderedOffsetOf(container: HTMLElement, node: Node, offset: num
     }
   }
 
-  // The position is inside `container` but the walk never reached it, which
-  // means `node` is the container itself with a child index for an offset.
-  return node === container ? consumed : null;
+  // Either the position is past everything (`boundary` is null, which is how a
+  // click below the last line arrives) or the boundary is a node the walker's
+  // filter skips. Both mean the whole container precedes it.
+  return consumed;
 }
 
 /**

From a1df41eaf269577ac7d9920188bb7d5ef14a45ab Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Aug 2026 22:30:51 +0000
Subject: [PATCH 3/4] Stop inline code from growing a rendered row's line box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An inline box is as tall as its line-height and sits around the shared
baseline, so a child in a different font is offset differently from the
line's strut and can push the line box past it. `.markdown-inline code`
sets `font-mono`, which made an item row containing `code` taller when
rendered than when showing its source — the source being one font
throughout. A visible jump on click, sized by whichever mono font the
reader happens to have: 0.6px here, unbounded elsewhere.

`leading-none` keeps the code's inline box under the strut, so it cannot
grow the line box on any font. It does not change the chip, because an
inline element's background paints its content area, which comes from the
font rather than from line-height.

Measured across four body/mono pairings: the row delta was -0.61px on the
default stack and 0.00 after, 0.00 on the rest either way. The height
assertion in markdown.spec.ts now covers a code row, which is the one that
regressed; a bold row never moved.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QuVeVda1EiJrJrdzsybRAr
---
 webapp/e2e/tests/markdown.spec.ts | 38 +++++++++++++++++++++----------
 webapp/src/index.css              | 12 +++++++++-
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/webapp/e2e/tests/markdown.spec.ts b/webapp/e2e/tests/markdown.spec.ts
index f618cf289..c0e9dc631 100644
--- a/webapp/e2e/tests/markdown.spec.ts
+++ b/webapp/e2e/tests/markdown.spec.ts
@@ -404,20 +404,34 @@ test.describe('Markdown in list-item rows', () => {
 
   test('keeps the row the same height across the swap', async ({ dashboardPage }) => {
     await dashboardPage.goto();
-    await dashboardPage.createListNote('Height Note', ['buy **milk**', 'second item']);
+    // The code row is here because it is the one that regressed: `<code>` sets
+    // its own font, and an inline box in a different font sits at a different
+    // offset around the shared baseline, so it grew the rendered line box past
+    // the strut while the all-one-font source stayed put. Sub-pixel on some
+    // fonts, visible on others — a row that only jumps for some readers is
+    // exactly what a test has to hold down.
+    await dashboardPage.createListNote('Height Note', [
+      'buy **milk**',
+      'run `npm test` first',
+      'second item',
+    ]);
     await dashboardPage.openNote('Height Note');
 
-    const row = dashboardPage.listItemRow(0);
-    const renderedHeight = (await row.boundingBox())!.height;
-
-    await dashboardPage.listItemRendered(0).click();
-    await expect(dashboardPage.listItemInput(0)).toBeFocused();
-    const sourceHeight = (await row.boundingBox())!.height;
-
-    // Both forms are one line here, and they carry the same padding and
-    // wrapping, so the row must not resize at all. A regression in
-    // TEXT_LAYOUT_CLASSES shows up here as a few pixels either way.
-    expect(Math.abs(sourceHeight - renderedHeight)).toBeLessThan(1);
+    for (const index of [0, 1]) {
+      const row = dashboardPage.listItemRow(index);
+      const renderedHeight = (await row.boundingBox())!.height;
+
+      await dashboardPage.listItemRendered(index).click();
+      await expect(dashboardPage.listItemInput(index)).toBeFocused();
+      const sourceHeight = (await row.boundingBox())!.height;
+
+      // Both forms are one line here, and they carry the same padding and
+      // wrapping, so the row must not resize at all. A regression in
+      // TEXT_LAYOUT_CLASSES, or in the inline styling of a rendered child,
+      // shows up here as a fraction of a pixel either way.
+      expect(Math.abs(sourceHeight - renderedHeight), `row ${index}`).toBeLessThan(0.5);
+      await dashboardPage.listItemInput(index).blur();
+    }
   });
 
   test('leaves an item with no Markdown as a live field', async ({ dashboardPage }) => {
diff --git a/webapp/src/index.css b/webapp/src/index.css
index 1929f6756..48aaf25b3 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -184,8 +184,18 @@ body {
      Links are blue-600 rather than the blue-500 above: item text renders on note
      cards, which carry the note's colour, and blue-500 does not hold 4.5:1
      against the lighter swatches. This is the shade LinkText used here before. */
+  /* `leading-none` is load-bearing, and not for looks. An inline box is as tall
+     as its line-height, positioned around the shared baseline — so a child in a
+     different font sits at a different offset than the line's strut and can push
+     the line box taller than the strut alone. Here that made an item row with
+     `code` in it taller *rendered* than the same row showing its source, since
+     the source is one font throughout: a visible jump on click, and one whose
+     size depends on which mono font the reader has (docs/specs/markdown-rendering.md
+     §1.2). A line-height under the strut's cannot grow the line box on any font.
+     It does not change the chip: an inline element's background paints its
+     content area, which is derived from the font, not from line-height. */
   .markdown-inline code {
-    @apply font-mono bg-black/5 dark:bg-white/10 rounded px-1 text-[0.9em];
+    @apply font-mono bg-black/5 dark:bg-white/10 rounded px-1 text-[0.9em] leading-none;
   }
   .markdown-inline a {
     @apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300;

From ebfcee2a155a5b144266358520dc07f741e06561 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Aug 2026 22:52:09 +0000
Subject: [PATCH 4/4] Lay both forms of a row out as blocks, not on a baseline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rendered view and the textarea it stands in for were matched by
reproducing a textarea's baseline on a span: a textarea is an inline-block
that baselines on its bottom margin edge, so the line box reserves descender
space underneath, and `overflow` moves a span's baseline to the same place
(CSS 2.1 §10.8.1).

That held only on the font it was measured against. How much space a line box
reserves is a property of the platform's font and UA stylesheet: on Windows
the textarea did not reserve it and the span did, so every row grew about 7px
the moment it lost focus — a jump that was exactly 0.00px here and plainly
visible there.

Blocks have no baseline to disagree about. Each box is then `lines ×
line-height + padding` from the same inherited metrics, equal by construction
on any platform, and the vertical-align/overflow/display overrides that used
to move the row by ±7px in a probe now all measure 0.00.

Rows lose the descender space they used to carry, so a list is that much
tighter. It was accidental rather than designed, it never applied to a
focused row, and it is now absent from both states rather than one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QuVeVda1EiJrJrdzsybRAr
---
 docs/specs/markdown-rendering.md       | 33 ++++++++++++++++++-----
 webapp/src/components/SortableItem.tsx | 37 +++++++++++++-------------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/docs/specs/markdown-rendering.md b/docs/specs/markdown-rendering.md
index ecfa81ff8..5df4b6f76 100644
--- a/docs/specs/markdown-rendering.md
+++ b/docs/specs/markdown-rendering.md
@@ -92,13 +92,32 @@ of once per row, and because the next click lands in a real textarea and
 corrects it.
 
 **Both forms must be the same height**, or every click shifts the rows below it.
-They share one class list for width, padding and wrapping, and two less obvious
-properties: a textarea is an `inline-block` that baselines on its bottom margin
-edge, which reserves descender space in the line box around it, and a span only
-does the same with a non-`visible` `overflow` (CSS 2.1 §10.8.1). Get that wrong
-and every row silently loses 7px when it is not focused. Where the two genuinely
-differ — markers moving a wrap point on a long row — the change is animated over
-120ms, behind `prefersReducedMotion`.
+They share one class list for width, padding and wrapping, and one property that
+matters more than it looks: **both are `block`**.
+
+That is there to remove the line box from the question rather than to match it.
+A textarea is an `inline-block` by default, so it sits on a baseline and the line
+box around it reserves descender space underneath — and how much is a property of
+the platform's font and UA stylesheet. Reproducing that on a span is possible
+(`overflow` moves a baseline to the bottom margin edge, CSS 2.1 §10.8.1) and was
+the first attempt, but it only held on the font it was measured against: on
+Windows the textarea did not reserve the space and the span did, so every row
+grew about 7px the moment it lost focus. Blocks have no baseline to disagree
+about, and each box is then `lines × line-height + padding` from the same
+inherited metrics — equal on any platform.
+
+The same trap has a second entrance, inside the rendered form. An inline box is
+as tall as its `line-height` and sits around the shared baseline, so a child in a
+*different font* is offset differently from the line's strut and can push the
+line box past it. `.markdown-inline code` sets `font-mono`, which made a row
+containing `` `code` `` taller rendered than in source — by 0.6px on one font and
+who knows what on another. `leading-none` on it keeps its inline box under the
+strut on any font, and does not change the chip, since an inline element's
+background paints its content area rather than its line box.
+
+Where the two forms genuinely differ — markers moving a wrap point, so the source
+occupies more lines — the change is animated over 120ms, behind
+`prefersReducedMotion`.
 
 **A mouse drag does not collapse the row it starts on.** The grip prevents the
 default mousedown, so grabbing it never moves focus off the field. Otherwise the
diff --git a/webapp/src/components/SortableItem.tsx b/webapp/src/components/SortableItem.tsx
index 9f15ca21a..028bd61c5 100644
--- a/webapp/src/components/SortableItem.tsx
+++ b/webapp/src/components/SortableItem.tsx
@@ -19,25 +19,26 @@ export const ROW_REVEAL_CLASSES =
   'opacity-0 pointer-events-none group-hover/item:opacity-100 group-hover/item:pointer-events-auto group-focus-within/item:opacity-100 group-focus-within/item:pointer-events-auto';
 
 // Everything that decides how much vertical space a line of item text takes:
-// width, padding, how it wraps, and how its box sits in the line. The rendered
-// view and the textarea it stands in for must carry all of it, or the row
-// changes height on the swap for no reason other than the two forms being laid
-// out differently.
+// width, padding, and how it wraps. The rendered view and the textarea it stands
+// in for must carry all of it, or the row changes height on the swap for no
+// reason other than the two forms being laid out differently.
 //
-// `inline-block` and `overflow-hidden` are the two that are not obvious, and
-// they only matter together. A textarea is an inline-block that baselines on its
-// bottom margin edge, so the line box around it reserves a further 7px of
-// descender space underneath — space that is part of every list row's height
-// today. A span reproduces the display easily but not the baseline: an
-// inline-block full of text baselines on *its own last line*, which puts it 7px
-// short. `overflow-hidden` is what moves a baseline back to the bottom margin
-// edge (CSS 2.1 §10.8.1), and it is why the two forms end up the same height.
+// `block` is the one that is not obvious, and it is here to take the line box
+// out of the question rather than to match it. A textarea is an `inline-block`
+// by default, so it sits on a baseline and the line box around it reserves
+// descender space underneath — and *how much* is a property of the platform's
+// font and its UA stylesheet, not of anything in this file. Reproducing that on
+// a span is possible (`overflow` moves a baseline to the bottom margin edge,
+// CSS 2.1 §10.8.1) and was the first fix here, but it only held on the font it
+// was measured against: on Windows the textarea did not reserve the space and
+// the span did, so every row grew ~7px the moment it lost focus.
 //
-// Font metrics are absent because both inherit them: Tailwind's preflight sets
-// `font: inherit` on form controls, which is the only reason a textarea agrees
-// with a span about line height at all.
-const TEXT_LAYOUT_CLASSES =
-  'inline-block overflow-hidden w-full pt-0 pb-1 pl-1 pr-0 whitespace-pre-wrap break-words align-baseline';
+// Blocks have no baseline to disagree about. Both boxes are then `lines ×
+// line-height + padding` from the same inherited metrics, which is equal by
+// construction on any platform. It also costs each row the descender space it
+// used to carry, so list rows are that much tighter than before — accidental
+// spacing, not designed, and now gone in both states rather than one.
+const TEXT_LAYOUT_CLASSES = 'block w-full pt-0 pb-1 pl-1 pr-0 whitespace-pre-wrap break-words';
 
 export interface SortableItemProps {
   id: string;
@@ -309,7 +310,7 @@ export default function SortableItem({ id, index, item, onUpdateListItem, onRemo
             // `opacity-0` rather than `invisible` or `hidden`: both of those
             // take an element out of the focus order, and `.focus()` on one
             // silently does nothing.
-            className={`${TEXT_LAYOUT_CLASSES} bg-transparent border-none outline-none min-w-0 resize-none placeholder-gray-500 dark:placeholder-gray-400 ${textToneClasses} ${
+            className={`${TEXT_LAYOUT_CLASSES} bg-transparent border-none outline-none min-w-0 resize-none overflow-hidden placeholder-gray-500 dark:placeholder-gray-400 ${textToneClasses} ${
               showRendered ? 'absolute top-0 left-0 opacity-0 pointer-events-none' : ''
             }`}
             value={item.text}