Fix: Use same amount of left pad as .cm-line

[mattmundell]

Why

The indent markers are drawn using backgrounds on a ::before element that is placed on CodeMirror lines (.cm-line). The left offsets of the indent markers should match the left pad of the .cm-line, however there is an error in the calculation.

The left offset of the indent marker is made up of:

• 0.5ch that is added to the left offset of the background in createGradient
• plus 2px that is set as the left value of the ::before element.

The 2px was added in #26 by @bradymadden97 to try fix the alignment but if you look closely at theme.tx#L85 the .cm-line left pad is 6px instead of 2px.

The offset of 0.5ch plus 2px is coming close, but see for example how the line under the 6 is shifting as I increase the font size:

(Maybe zoom the first image yourself to see how far left it should be.)

This is because the size of 0.5ch depends on the font size, whereas the CodeMirror .cm-line offset is always fixed at 6 pixels.

What changed

Remove the extra 0.5ch offset from the background and change the ::before left from 2px to 6px.

Test plan

I tested using an app that uses CodeMirror. I enabled the indentation markers and then gradually increased the font size to confirm the drift.

After the PR the line stays in place when I increase the font size:

[mattmundell]

Note that the same happens in the Replit UI. It's easiest to see when choosing a Font Size of Huge in User Settings:

The red box is the cursor. It's an outline because the view does not have the focus. The grey line should align with the left of the cursor.

Maybe clearer when I modify --indent-marker-bg-color in devtools:

Compare with a Font Size of Small: