[BUG] .marker position causes unnecessary horizontal scrollbar in Scratch editor

[mkst]

In CodeMirror.tsx we determine the width of the editor and assign it to a css variable

    const { ref: el, width } = useSize<HTMLDivElement>();
    ...
        <div
            ref={el}
            onMouseMove={debouncedOnMouseMove}
            className={clsx(styles.container, className)}
            style={
                {
                    "--cm-font-size": `${fontSize}px`,
                    "--cm-container-width": `${width}px`,
                } as CSSProperties
            }
        />

which we use in the CSS for useCompareExtension.ts:

.marker {
    &::after {
        content: "";

        position: absolute;
        left: 0;
        right: 0;
        width: var(--cm-container-width); // Set by <CodeMirror> component
        height: calc(var(--code-line-height) * 1em);

        pointer-events: none;

        background: #00ffff10;
    }
}

However, when there is a vertical scrollbar in the scratch editor, we end up getting a horizontal one too - because the .marker is being placed 'too far' to the right.

My CSS is poor and ChatGPT couldn't give me a solution that wasnt equivalent to boiling the ocean.. so I'm creating the issue in case someone with a brain wants to fix it!