Monaco editor intellisense font sizing wrong making it unusable

Question

I have the Monaco editor embedded in a React component. For some reason the intellisense font sizes are all hosed up. Anyone have any ideas? I have changed a bunch of settings to try and fix things but nothing I have tried is having any impact.

    import { useRef } from 'react'
    import MonacoEditor from '@monaco-editor/react'
    import codeShift from 'jscodeshift'
    import Highlighter from 'monaco-jsx-highlighter'
    
    import './jsx-syntax.css'
    
    const CodeEditor = ({ height, initialValue, language, onChange, readOnly }) => {
       const editorRef = useRef()
       const onEditorDidMount = (getValue, editor) => {
          editorRef.current = editor  
          editor.onDidChangeModelContent(() => (onChange) ? onChange(getValue()) : {})
          editor.getModel()?.updateOptions({ tabSize: 4 })
    
          const highlighter = new Highlighter(window.monaco, codeShift, editor);
          highlighter.highLightOnDidChangeModelContent(
             () => {}, () => {}, undefined, () => {}
          );
       }
       const options = {
          minimap: {enabled: false},
          //showUnused: false,
          lineNumbersMinChars: 3,
          //fontSize: 13,
          scrollBeyondLastLine: false,
          automaticLayout: true,
          readOnly
       }
    
       return (
          <div className="editor-wrapper">
             <MonacoEditor theme="dark" language={language ?? 'javascript'} height={(height ?? 400) + 'px'} value={initialValue ?? ''} 
                           editorDidMount={onEditorDidMount} options={options}
             />
          </div>
       );
    
    };

export default CodeEditor;

Answer 1

After much playing around I can confirm that the reason for the distortions is that my project is using the Bulma css framework. It looks like Monaco does not properly namespace its CSS and that Bulma is able to change things that completely mess up the toolbars and intellisense popups from the editor. To fix it I am manually going through and figuring out which styles need to be loacally applied to the wrapper around Monaco to get it working again.

It turned out to be the padding added to the tabs style in Bulma since the Monaco intellisense apparently uses a embedded tab on each line:

.tabs a {
  ...
  padding: 0.5em 1em;
  ...
}