[DataGrid] Fix Width when ResizableColumns and Sortable

[EvandroMoSou]

Pull Request

📖 Description

If in a DataGrig: ResizableColumns="true" and Sortable="true"

The width is wrong.

🎫 Issues

I didn't find it

👩‍💻 Reviewer Notes

In DataGridTemplateColumns.razor change the grid to:

<div style="height: 500px; overflow-x:auto; display:flex;">
    <FluentDataGrid Items="@Data.People" RowSize="@DataGridRowSize.Medium" ResizableColumns="true">
        <TemplateColumn Title="Person" Sortable="true">
            <div class="flex items-center">
                <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.CountryCode.ToLower()).svg" alt="Flag of @(context.CountryCode)" />
                <nobr>
                    <strong>@context.LastName</strong>, @context.FirstName
                </nobr>
            </div>
        </TemplateColumn>
        <TemplateColumn Title="Bonus">
            <FluentButton Appearance="Appearance.Accent" @onclick="@(() => Bonus(context))">Regular</FluentButton>
            <FluentButton Appearance="Appearance.Accent" @onclick="@(() => DoubleBonus(context))">Double</FluentButton>
        </TemplateColumn>
    </FluentDataGrid>
</div>

And the error will occur.

📑 Test Plan

The datagrid above will be correct

✅ Checklist

General

• [] I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

No.