How to avoid MGT component to appears behind another

Question

I'm using the Microsoft Graph Toolkit to display user information from a SharePoint SPFX webpart.

Specifically, I use the mgt-person and mgt-person-card components.

Unfortunately, there are some native components in the page that defines a z-index:2 css rule (page title).

This leads to weird rendering :

Red is the mgt-person component, green is the mgt-person-card component and blue is the native page title.

As you can see, the mgt flyout is behind the page title. This is due to the z-index rules applied to the page title.

How to fix that ?

Reproduction (not SPFX) : https://jsfiddle.net/stevebeauge/5Lg7c63n/

I try to override the z-index rule in my webpart CSS, but this doesn't work.

I even wasn't able to find a DOM element where to apply a higher z-index (maybe due to the mess of web component and its shadow DOM).

The SPFX project was generated using the @microsof/sharepoint yeoman generator. I referenced the latest MGT npm package and in my webpart:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'mgt-person': any;
      'mgt-person-card': any;
      'template': any;
    }
  }
}
export default class MyWebpartProp extends React.Component<IMyWebpartProp, {}> {
  public render() {
    return (
              <div className={styles.resultContainer}>
                <mgt-person user-id="me" show-name show-email person-card="click">

                  <template data-type="person-card">
                    <mgt-person-card person-details="{{person}}" person-image="{{personImage}}">
                      <template data-type="additional-details">
                       ... some markup ...
                      </template>
                    </mgt-person-card>
                  </template>

                </mgt-person>
              </div>
            );

  }


}

Package.json :

"dependencies": {
    "@microsoft/decorators": "1.10.0",
    "@microsoft/mgt": "^1.1.0",
    "@microsoft/sp-application-base": "1.10.0",
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-dialog": "1.10.0",
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.15.1",
    "custom-event-polyfill": "^1.0.7",
    "jshint": "^2.11.0"
},
"devDependencies": {
    "@microsoft/sp-build-web": "1.10.0",
    "@microsoft/sp-tslint-rules": "1.10.0",
    "@microsoft/sp-module-interfaces": "1.10.0",
    "@microsoft/sp-webpart-workbench": "1.10.0",
    "@microsoft/rush-stack-compiler-2.9": "0.10.3",
    "gulp": "~3.9.1",
    "@types/chai": "4.2.8",
    "@types/mocha": "7.0.1",
    "ajv": "~6.11.0"
}

Answer 1

Just to provide closure here, this issue should be fixed as part of 1.2 update of the Microsoft Graph Toolkit.