Make the diagnostic window of monaco editor exceed an allotment panel

I have made a draggable split panel by https://github.com/johnwalley/allotment.

In the panel panel, I have a monaco editor. when I hover on the monaco editor, a diagnostic window appears. At the moment, the diagnostic window does not exceed the first panel even with .monaco-hover { z-index: 1000 !important } in style.css. Does anyone know how I could make the diagnostic window exceed the first panel?

CodeSandbox: https://codesandbox.io/s/reset-forked-7wvrbj?file=/src/App.js

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

import "./style.css";

import Editor, { monaco } from "@monaco-editor/react";

monaco
  .init()
  .then((monaco) => {
    monaco.languages.registerHoverProvider("html", {
      provideHover: function (model, position) {
        console.log(position);
        return {
          range: new monaco.Range(
            1,
            1,
            model.getLineCount(),
            model.getLineMaxColumn(model.getLineCount())
          ),
          contents: [
            { value: "**SOURCE**" },
            { value: "hey man, how are you?" }
          ]
        };
      }
    });
  })
  .catch((error) =>
    console.error("An error occurred during initialization of Monaco: ", error)
  );

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        <Allotment
          vertical
          onChange={this.handleChangeAllotment}
          ref={this.myRef}
        >
          <Allotment.Pane>
            <Editor
              height="30vh"
              language="html"
              value={`
<section>
  <div>
    <span>
      {{ some_value }}
    </span>
  </div>
</section>
    `}
              options={{
                selectOnLineNumber: true,
                lineNumbersMinChars: 0,
                glyphMargin: true,
                readOnly: true,
                hover: {
                  enabled: true
                }
              }}
            />
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={20}>
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}

I'm not sure what you meant by diagnostic window, but i'm going to assume that it's the box that shows "hey man, how are you?" when the code is hovered, i'm also going to assume that you want that box to be shown over the panel where there are "short" texts. If that's what you want, then it seems like the cause of why it's not shown on the other panel is because the parent window has overflow: hidden, all you need to do is to change the panel overflow to visible. To do that you can use this CSS:

...
div[data-testid="split-view-view"][data-testid="split-view-view"][data-testid="split-view-view"] {
  overflow: visible;
}

div[data-testid="split-view-view"][data-testid="split-view-view"][data-testid="split-view-view"]:nth-child(2) {
  background: white;
}
...

Why did I repeat [data-testid="split-view-view"] so many times? it's to increase the specificity of the rules (alternatively, you can add !important to the overflow: visible without repeating the [data-testid="split-view-view"]). As for why there is background white for the second panel, it's because when the overflow is not hidden, the elements from the first panel will overlap with the second panel.

This is the working codesandbox fork.