title: Avoiding Monaco decorations being clipped?
body: <p>Monaco editor has several interfaces for creating decorations or overlays.  These appear to be rendered into one of two places in the DOM:</p>
  <ol>
  <li><code>.monaco-editor</code> &gt; <code>.overflow-guard</code> &gt; <code>.overlayWidgets</code> &gt; <code>.monaco-editor-hover</code></li>
  <li><code>.monaco-editor</code> &gt; <code>.overflowingContentWidgets</code></li>
  </ol>
  <p>I am finding that using the line decorations API, the overlays are rendered into location (1), and that's a problem:</p>
  <p><img src="https://i.stack.imgur.com/TKYdl.png" alt="Clipped line decoration" /></p>
  <p>This happens because <code>.overflow-guard</code> has overflow (surprise!) set to 'hidden'.</p>
  <p>Sample code:</p>
  <pre class="lang-js prettyprint-override"><code>editorInstance.getModel().deltaDecorations(decorations.current, [
    {
      range: new monaco.Range(err.line, err.pos, err.line, err.pos + err.str.length),
      options: {
        className: 'error',
        glyphMarginClassName: 'error_line',
        glyphMarginHoverMessage: { value: err.message },
        overviewRuler: { color: '#ff0000', position: monaco.editor.OverviewRulerLane.Full }
      }
    }
  ]);
  </code></pre>
  <p>This is an instance of an <a href="https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.imodeldecorationoptions.html" rel="nofollow noreferrer"><code>IModelDecorationOptions</code></a>.</p>
  <p><strong>Questions</strong>:</p>
  <ul>
  <li>Is it possible to modify my code to do this in a way that renders the decoration outside of <code>overflow-guard</code>?</li>
  <li>Is there a monaco bug here?  (I couldn't find a way to test it on the playground)</li>
  </ul>