Search code examples
cssintellisensetailwind-cssmonaco-editor

Monaco Editor Intellisense Not Full Height

I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:

enter image description here

As you can see, the last suggested item is partially obscured. I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.

Any hints would be much appreciated!

UPDATE 1

Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:

enter image description here

UPDATE 2

Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:

enter image description here

As you can see, the dropdown disappears as soon as I click anywhere else.

Solution

  • The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:

    .monaco-editor .suggest-widget div.tree {
    white-space: unset;
    padding-bottom: 0;
}

    And to get get to that solution for other libraries and styling artefacts:

    It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:

    Run:

    setTimeout(5000);

    This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:

    ctrl+shift+c that brings up the debuggers element selector.

    Here we are, the suggestion was from the following post: How can I inspect disappearing element in a browser?

    break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.