Cursor is off by a few pixels

[stav-bitanski]

Describe the bug
The cursor is getting a bigger offset to the right. Instead of being in the end of the input/output, it is off by a few pixels and gets the gap gets bigger when the input/output closer to the right side

To Reproduce
Steps to reproduce the behavior:

1. render the hello.cast in react (or any other way you like):

const Asciinema = () => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    AsciinemaPlayerLibrary.create(
        'https://raw.githubusercontent.com/r-lib/asciicast/refs/heads/main/inst/examples/hello.cast',
        currentRef
    )
  }, []);
  
  return <div ref={ref} />;
}

2. watch the recording and see the error

Expected behavior
The cursor should be at the end of every input/output and not off by a few pixels

Screenshots
The speed is a little fast so you can stop it in the middle and see the the longer the command, to further away the cursor:

Screen.Recording.2024-11-11.at.13.12.00.mov

Versions:

• OS: [e.g. macOS 12.6, Ubuntu 23.04]
• Browser [e.g. Firefox 111]
• asciinema server: [e.g. git tag v20230323 or git commit id] (only when you're self-hosting asciinema-server)