Toolkit components should display correctly within grids

[sebastienlevert]

Proposal: Toolkit components should display correctly within grids

Related to #1464

Description

When using the Toolkit with Grid systems (AG Grid, Fluent UI DetailsList, etc.) the Person cards are usually truncated and invisible outside the current row. We should identify solutions so it's seamless to our developers.

Hello sebastienlevert, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[gavinbarron]

This may be related to the behavior we saw during development of the new version of the Agenda component were FluentUI cards use a contain: content CSS rule. This was overcome in this commit by 1e03757

[luiztapia]

Hello everyone, has anyone managed to implement the fix?

It would be great if someone can fix it.

I have this problem when I use Person in a DetailsList component in Spfx. I tried to work around css with several options and it didn't work. I also tried the aproach mentioned by @gavinbarron and it didn't work.

I looked at the other references and they didn't work either.
#1464
#1464

I am using the following versions:
"@microsoft/mgt-react": "^2.9.0",
"@microsoft/mgt-spfx": "^2.9.0",
"@microsoft/sp-core-library": "1.16.0",
"@microsoft/sp-office-ui-fabric-core": "1.16.0",
"@microsoft/sp-webpart-base": "1.16.0",
"office-ui-fabric-react": "^7.199.1",
"react": "17.0.1",
"react-dom": "17.0.1"

[gavinbarron]

@luiztapia we haven't had time to focus on this issue.
If you have any minimal repros available that will help us investigate when we have the time to do so.