fix: Sortable Column Header Cuts Off in FluentDataGrid #3151
Description
🐛 Bug Report
When I make my column sortable, the title of my columns get cut off when turned into a button.
💻 Repro or Code Sample
@page "/test"
<FluentDataGrid TGridItem="Test" Items="testList.AsQueryable()" GenerateHeader="GenerateHeaderOption.Sticky">
<TemplateColumn Sortable="true" Title="First Column Header" Align="Align.Center" Width="200px" >
@context.a
</TemplateColumn>
<TemplateColumn Sortable="true" Title="Second Column Header" Align="Align.Center" Width="200px">
@context.b
</TemplateColumn>
<TemplateColumn Sortable="true" Title="Third Column Header" Align="Align.Center" Width="200px">
@context.c
</TemplateColumn>
</FluentDataGrid>
@code{
class Test
{
public string a = "a";
public string b = "b";
public string c = "c";
}
private List<Test> testList = new()
{
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
};
}
🤔 Expected Behavior
I want the button to be the same width of the header and not cut off the title.
😯 Current Behavior
The conversion to a button cuts off the title.
🔦 Context
I think it has something to do with making the headers have display: flex that came with the version of fluent 4.11.1.
In the browser inspect element, when I select the column header and uncheck the display: flex, the correct look is there
🌍 Your Environment
Windows
Edge
.NET 8.0.404 and Fluent UI 4.11.1