fix: Column size incorrect when mixing percentage and pixel widths in FluentDataGrid

[JamesNK]

🐛 Bug Report

The column widths of a data grid aren't correct when the data grid firsts loads when mixing percentage and pixel widths and the mode is Table:

datagrid-pixel-size.mp4

1. Clone https://github.com/dotnet/aspire.git
2. Switch to jamesnk/grid-table-display branch
3. Open Aspire.slnx
4. Run the TestShop.AppHost project that is in the playground folder
5. Click on the Online store link on the resources page a couple of times to create traces
6. Go to traces page and click on an entry
7. The trace detail page loads. When the page is refreshed the Actions column (width specified in pixels) isn't the correct size.
8. Moving the mouse cursor onto the page causes the table size to be fixed.

🤔 Expected Behavior

Pixel width size is correct. I looked up the rules for column sizes when using table-layout-mode: fixed and first the explicit pixel width size columns are given widths, then the columns width percentages are sized according to the remaining size.

😯 Current Behavior

Actions column is smaller than it should be. When I move my mouse onto the screen then it is given the correct size (100px) which I confirmed in browser tools.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

Another resize related issue is FluentOverflow in a grid with table mode. The overflow doesn't resize when the page reloads. Moving the mouse onto the page causes the overflow to correctly be resized:

datagrid-overflow.mp4

[JamesNK]

I see resizing issues on other pages (which just have percentages in columns) when the browser window is smaller:

datagrid-more-resizing.mp4

[vnbaaij]

Where does the table-layout: fixed come from? We do not have it in our code. It is interfering with the table as can be seen below:

In the DevTools, I remove the table-layout from the table. You can see the column widts are being adjusted. Then I move the cursor ont the page and the widths are being adjusted again. Also, the table-layout value gets applied again automagically! This is not coming from the library... Sorry! The table-layout is actually coming from our code

With PR #4112 I am adding a minimal width to the column header style. This has a positive effect on this issue as well. On testing your Aspire PR with this new version, I am not seeing the change in the action column size anymore when specifying a MinWidth="100px" on the action column. On the Aspire side this can potentially be weaved into the column manager...

Closing this as there is a solution for this in the next version.