Autocomplete div overlaps with the code line

I am using the ‘@codemirror/autocomplete’ module and feeding a custom list of values into it.

It positions the autocomplete div below or above the current line based on how close it is to the boundary. But when it positions it above the line, it overlaps with the code line by a few pixels. How can I control this behaviour? Couldn’t figure out a way to tell the module to adjust its positioning (top property in style)

Think these 2 functions are responsible for setting the top property

    measureInfo() {
        let sel = this.dom.querySelector("[aria-selected]");
        if (!sel)
            return null;
        let rect = this.dom.getBoundingClientRect();
        let top = sel.getBoundingClientRect().top -;
        if (top < 0 || top > this.list.clientHeight - 10)
            return null;
        let left = this.view.textDirection == Direction.RTL;
        let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
        if (left && spaceLeft < Math.min(MaxInfoWidth, spaceRight))
            left = false;
        else if (!left && spaceRight < Math.min(MaxInfoWidth, spaceLeft))
            left = true;
        return { top, left };
    positionInfo(pos) {
        if ( && pos) {
   = + "px";
  "cm-completionInfo-left", pos.left);
  "cm-completionInfo-right", !pos.left);

As a workaround, you could add a margin to the .cm-tooltip-autocomplete element. But it should be using the top of the text’s bounding box to position the element. Do you have a screenshot of the effect?

This is what it looks like when auto complete is shown above the line.

And the following picture is when auto complete is shown below. This one is clean.

I tried setting margin bottom in .cm-tooltip-autocomplete - didn’t help with moving the auto complete window up.

Oh, that is bad. Can you reproduce it in a vanilla setup? Or is it related to the font or some style you’re using?

Ok I removed all of my custom theme - and now it positions correctly.

So must be something with the styles I used. I have noted some pertinent style details below. May be I have done something wrong?

'.cm-line': {
    padding: '2px 2px 2px 4px',
    minHeight: '24px',
'.cm-tooltip-autocomplete > ul > li': {
    width: '100%',
    fontSize: '14px',
    minHeight: '28px',
    display: 'flex',
    alignItems: 'center',
    padding: '0 !important',
'.cm-tooltip-autocomplete > ul': {
    minWidth: '180px',
    width: '324px',
    height: '100%',
    maxHeight: '40vh !important',
    padding: '6px 0 !important',
    fontFamily: 'DejaVuSansMono, Menlo-Regular, Inconsolata !important',

Any pointers would be appreciated. Thank you.

Found the bug in my styling. I was using an extra transform: translateY when styling cm-tooltip. I have removed that and it works.