Fluentui: DetailsList header and rows exceeds DetailsList

[mslonli]

Bug Report

• __Package version(s)__: (fill this out) 6.41.1
• __Browser and OS versions__: (fill this out if relevant)

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) If I have time
Requested priority: (Blocking, High, Normal, Low) High

Products/sites affected: (if applicable)

Describe the issue:

The width of DetailsList header and rows exceeds the width of the entire DetailsList

Actual behavior:

The width of DetailsList header and rows exceeds the width of the entire DetailsList

Expected behavior:

The width of header and rows should be the same as the width of the DetailsList

If applicable, please provide a codepen repro:

https://codepen.io/anon/pen/rrQMOx?editors=1111
It doesn't clearly reproduce on codepen. Please check the screenshot attached here.
I did some triage and I found the width GroupSpacer in the header and rows might be the root cause.
If I decrease the width of the GroupSpacer the issue get fixed. We calculate the width of GroupSpacer by groupNestingDepth. I think this part causes the issue.

[jeffersonking]

Hi Kevin, not sure if you already have a fix, but I think the bug is here: https://github.com/OfficeDev/office-ui-fabric-react/blob/76eac480037ace06c7aceef668914b6b0a6b2e19/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx#L805

groupExpandWidth is invariant to the group nesting depth. Something like this would fix it:

function groupDepth(groups) {
    return 1 + Math.max(0, ...groups.map(g => g.children && groupDepth(g.children) || 0));
}
var groupExpandWidth = groups ? groupDepth(groups) * GROUP_EXPAND_WIDTH : 0;

Hope that helps!

[KevinTCoughlin]

@jeffersonking that solution looks like it'd fix the problem -- awesome! Would you like to submit a PR? I'd be happy to test & sign-off. Otherwise will raise it tomorrow. 🎉

[jeffersonking]

Even more straightforward than expected.