fix(mobile): three-digit list numbers no longer lose their first digit

apps/mobile/src/lib/orderedListMarkers.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { wideOrderedListMarkerDigits } from "./orderedListMarkers";
+
+const numberedList = (count: number, marker = "1.") =>
+  Array.from({ length: count }, () => `${marker} item`).join("\n");
+
+describe("wideOrderedListMarkerDigits", () => {
+  it("ignores text and lists that fit the normal gutter", () => {
+    expect(wideOrderedListMarkerDigits("just a message")).toBe(0);
+    expect(wideOrderedListMarkerDigits("We shipped it in 2026. More later.")).toBe(0);
+    expect(wideOrderedListMarkerDigits(numberedList(99))).toBe(0);
+  });
+
+  it("covers written and renderer-generated three-digit markers", () => {
+    expect(wideOrderedListMarkerDigits("100. item")).toBe(3);
+    expect(wideOrderedListMarkerDigits(numberedList(100))).toBe(3);
+    expect(wideOrderedListMarkerDigits(numberedList(100, "> 1."))).toBe(3);
+  });
+
+  it("measures ordered markers nested in other list items", () => {
+    expect(wideOrderedListMarkerDigits("100. 1. item")).toBe(3);
+    expect(wideOrderedListMarkerDigits("- 1000. nested")).toBe(4);
+  });
+});

apps/mobile/src/lib/orderedListMarkers.ts

@@ -0,0 +1,24 @@
+// A line that may start an ordered-list item, including one nested after quote
+// or list markers. Group 1 holds the container markers before the last number,
+// which can include outer numbers. Each repeat starts with a marker or `>`,
+// which keeps matching linear.
+const ORDERED_MARKER_LINE =
+  /^([ \t>]*(?:(?:[-+*]|\d{1,9}[.)])[ \t]+(?:>[ \t>]*)?)*)(\d{1,9})[.)](?:[ \t\r]|$)/;
+const PREFIX_NUMBER = /(\d{1,9})[.)]/g;
+export function wideOrderedListMarkerDigits(markdown: string): number {
+  let widest = 0;
+  let items = 0;
+  for (const line of markdown.split("\n")) {
+    const marker = ORDERED_MARKER_LINE.exec(line);
+    if (!marker) continue;
+    items += 1;
+    widest = Math.max(widest, Number(marker[2]));
+    for (const outer of marker[1]!.matchAll(PREFIX_NUMBER)) {
+      widest = Math.max(widest, Number(outer[1]));
+    }
+  }
+  // The renderer increments repeated `1.` markers. Counting every matched item
+  // may over-size messages with many separate lists, but it cannot clip them.
+  const digits = String(Math.max(widest, items)).length;
+  return digits >= 3 ? digits : 0;
+}

apps/mobile/src/native/EnrichedMarkdownText.tsx

@@ -5,8 +5,16 @@ import {
   formatComposerContextReference,
 } from "@t3tools/shared/composerContextReferences";
 import { markdownWithHtml } from "../lib/markdownDocument";
+import { wideOrderedListMarkerDigits } from "../lib/orderedListMarkers";
 import { useCallback, useMemo, useState } from "react";
-import { ActionSheetIOS, Platform, Share, StyleSheet, View } from "react-native";
+import {
+  ActionSheetIOS,
+  Platform,
+  Share,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import {
   EnrichedMarkdownText,
   type DocumentAssetsEvent,
@@ -25,9 +33,18 @@ import {
   enrichedLinkVariantPattern,
 } from "../lib/enrichedLinkPresentation";
 
+// The native list gutter only fits "99.", so wider numbers draw past the left
+// edge. DM Sans digits are at most 0.71em wide and the period 0.26em, in every
+// weight; the gutter is in dp while the marker scales with the system font size.
+function orderedListMarkerMinWidth(digits: number, fontSize: number, fontScale: number): number {
+  if (digits === 0) return 0;
+  return Math.ceil((digits * 0.71 + 0.26) * fontSize * fontScale);
+}
+
 function enrichedStyle(
   style: SelectableMarkdownTextProps["textStyle"],
   dark: boolean,
+  orderedListMarker: { digits: number; fontScale: number },
 ): MarkdownStyle {
   const monospace = Platform.OS === "ios" ? "Menlo" : "monospace";
   // Keep the radius modest: iOS clips square table-cell borders without stroking the corner arcs.
@@ -116,7 +133,17 @@ function enrichedStyle(
       borderWidth: 2,
       gapWidth: 12,
     },
-    list: { ...body, bulletColor: style.mutedColor, markerColor: style.mutedColor, gapWidth: 6 },
+    list: {
+      ...body,
+      bulletColor: style.mutedColor,
+      markerColor: style.mutedColor,
+      gapWidth: 6,
+      markerMinWidth: orderedListMarkerMinWidth(
+        orderedListMarker.digits,
+        style.fontSize,
+        orderedListMarker.fontScale,
+      ),
+    },
     thematicBreak: { color: style.dividerColor, height: 1, marginTop: 8, marginBottom: 8 },
     table: {
       ...body,
@@ -239,9 +266,17 @@ export function MobileEnrichedMarkdownText(props: SelectableMarkdownTextProps) {
       mimeTypes: { "app.t3.context-fragment": props.contextClipboardFragment! },
     };
   }, [props.contextClipboardFragment, props.markdown]);
+  const { fontScale } = useWindowDimensions();
+  const orderedListMarkerDigits = useMemo(() => wideOrderedListMarkerDigits(markdown), [markdown]);
   const markdownStyle = useMemo(
-    () => ({ ...enrichedStyle(props.textStyle, themeAppearance === "dark"), linkVariants }),
-    [props.textStyle, themeAppearance, linkVariants],
+    () => ({
+      ...enrichedStyle(props.textStyle, themeAppearance === "dark", {
+        digits: orderedListMarkerDigits,
+        fontScale,
+      }),
+      linkVariants,
+    }),
+    [props.textStyle, themeAppearance, orderedListMarkerDigits, fontScale, linkVariants],
   );
   const renderMedia = useCallback(
     (asset: MarkdownMediaAsset) =>