Markdown editor: source-visible ordered-list markers shift with proportional digit widths

[ulugbekna]

Description

In the Markdown editor, source-visible ordered-list markers with different digit widths do not share a left edge. In a nested list such as - Bullet followed by 1. Ordered and 2. Ordered two, both the number and the source-indentation dots shift horizontally between the two sibling items.

This is independent of the recently investigated vertical marker-centering behavior: the horizontal geometry reproduces on the pre-fix CSS.

Reproduction steps

1. Open a Markdown document in the Markdown editor.
2. Enter the following source:

- Bullet
  1. Ordered
  2. Ordered two

3. Enable source markers / edit mode so the source list markers and indentation are visible.
4. Compare the two nested ordered-list rows.

Expected behavior

Sibling ordered-list source markers with the same digit count should occupy the same horizontal slot. Their equivalent source-indentation dots should also align.

Actual behavior

1. and 2. are right-aligned, but their left edges differ by 2.09px. The complete nested gutter moves with the marker, including the dots representing the two identical leading source spaces.

Live DOM measurements in the default macOS font stack:

Marker	Gutter left	Marker left	Marker right	Marker width
1.	63.20px	91.20px	105.00px	13.80px
2.	61.11px	89.11px	105.00px	15.89px

The . and trailing source space have identical positions for both rows (97.20px and 101.20px, respectively). Only the digit width differs. The same behavior occurs for root ordered lists and for 9. / 10. / 11..

Confirmed root cause

The ordered marker is rendered with proportional figures (font-variant-numeric: normal) in the system font: 1 advances 6.01px while 2 advances 8.09px. The marker gutter is shrink-to-fit and right-pinned:

.md-list-gutter {
  position: absolute;
  right: 100%;
  display: flex;
}
.md-list-gutter > .md-marker-listItemMarker {
  flex: 0 0 auto;
}

As a result, a wider digit grows the gutter leftward. Relevant package CSS: vscode-team-tools/packages/markdown-editor/src/view/editor.css (.md-list-gutter and its marker child).

Possible direction

Applying font-variant-numeric: tabular-nums to ordered source markers makes 1. and 2. equal-width (16.46px in this environment) and aligns both gutters exactly. This needs a deliberate UX/layout decision: the wider tabular 1 moves the gutter about 2.1px left, so the implementation should preserve the intended relationship between nested gutters and the root bullet column.

Any fix should add a regression assertion comparing horizontal positions across sibling ordered markers; the current Component Explorer alignment fixtures catch vertical drift but intentionally do not compare sibling marker left edges.