diff --git a/packages/git-ui/src/components/molecules/timeline.jsx b/packages/git-ui/src/components/molecules/timeline.jsx
index 5c024f9..f2ade13 100644
--- a/packages/git-ui/src/components/molecules/timeline.jsx
+++ b/packages/git-ui/src/components/molecules/timeline.jsx
@@ -45,11 +45,12 @@ function AnchoredCode({ anchor, context }) {
             className={cn(
               'flex whitespace-pre px-3',
               ROW_STYLE[type],
-              // The line the comment is about, marked over whatever side it
-              // is on.
+              // The lines the comment is about, marked over whatever side
+              // they are on. A single line is a span of one.
               context &&
-                index === context.at &&
-                'ring-1 ring-key/40 ring-inset',
+                index >= context.from &&
+                index <= context.to &&
+                'bg-key/10',
             )}
           >
             <span className="w-10 shrink-0 select-none text-right text-faint tabular-nums">
@@ -226,7 +227,11 @@ export function Timeline({
                 <div className="flex flex-wrap items-baseline gap-x-3 border-border border-b bg-muted px-3 py-1.5 text-[12px]">
                   <code className="min-w-0 truncate font-mono text-faint">
                     {anchor.path}
-                    {anchor.line ? `:${anchor.line}` : ''}
+                    {anchor.line
+                      ? anchor.endLine && anchor.endLine !== anchor.line
+                        ? `:${anchor.line}-${anchor.endLine}`
+                        : `:${anchor.line}`
+                      : ''}
                   </code>
                   {inDiff && threadHref ? (
                     <Link href={threadHref(fragment)} className="ml-auto">
diff --git a/packages/git-ui/src/pages/commit.jsx b/packages/git-ui/src/pages/commit.jsx
index c19a872..a8f7536 100644
--- a/packages/git-ui/src/pages/commit.jsx
+++ b/packages/git-ui/src/pages/commit.jsx
@@ -248,10 +248,21 @@ export function CommitPage({
     const file = data.files.find((one) => one.path === anchor.path);
     if (!file?.hunks) return null;
     const rows = file.hunks.flatMap((hunk) => hunk.lines);
-    const at = rows.findIndex((row) => lineKey(row) === anchorKey(anchor));
-    if (at < 0) return null;
-    const from = Math.max(0, at - CONTEXT_LINES);
-    return { lines: rows.slice(from, at + CONTEXT_LINES + 1), at: at - from };
+    // The span the comment covers: its first line to its last. A single-line
+    // comment has the two the same. anchorKey keys the last line, and the
+    // first is the anchor's own side and line.
+    const side = anchor.side === 'old' ? 'old' : 'new';
+    const startKey = `${side}:${anchor.line}`;
+    const startAt = rows.findIndex((row) => lineKey(row) === startKey);
+    const endAt = rows.findIndex((row) => lineKey(row) === anchorKey(anchor));
+    if (startAt < 0 || endAt < 0) return null;
+    const [lo, hi] = startAt <= endAt ? [startAt, endAt] : [endAt, startAt];
+    const from = Math.max(0, lo - CONTEXT_LINES);
+    return {
+      lines: rows.slice(from, hi + CONTEXT_LINES + 1),
+      from: lo - from,
+      to: hi - from,
+    };
   };
 
   // A thread anchored to a line is a place in the diff, which is the other