[DataGrid] Fix resize indicator height (when ResizeColumnOnAllRows is true)

[vnbaaij]

Fix #4378. The height calculation was don alright already by the header height was set too high because of a padding value. The padding has now been removed. Because of the removed padding, the top of the resize indicator needs to be set dependent on the DataGridDisplayMode

[github-actions]

Unit Tests

• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering
• ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridTests.FluentDataGrid_Default

Details on your Workflow / Core Tests page.

[Copilot]

Pull request overview

This PR fixes the height calculation for the resize indicator in the DataGrid component when ResizeColumnOnAllRows is set to true (issue #4378). The fix involves removing excessive padding from header cells and adjusting the positioning logic to properly align the resize handle.

Key changes:

• Removed CSS padding from column headers that was causing incorrect height calculations
• Adjusted min-height from 44px to 40px to compensate for the removed padding
• Updated resize handle positioning to be dynamically calculated based on the actual offset and DataGridDisplayMode

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
FluentDataGridCell.razor.css	Removed padding from .column-header class to fix height calculation
FluentDataGridCell.razor.cs	Reduced min-height from 44px to 40px to account for removed padding
FluentDataGrid.razor.js	Updated resize handle creation logic to dynamically calculate top position and adjusted height calculations
FluentDataGrid.razor.css	Removed hardcoded top: 5px from .resize-handle to allow dynamic positioning
FluentDataGrid.razor	Added dynamic top position calculation based on DataGridDisplayMode (4px for Table, 2px for Grid)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The code assumes .resize-handle will always exist when it calls offsetTop on the query result. If the resize-handle element is not found (e.g., if the DOM hasn't fully rendered), this will throw a null reference error. Consider adding a null check or providing a default value:

const resizeHandle = header.querySelector('.resize-handle');
const resizeTop = resizeHandle ? resizeHandle.offsetTop : 0;

Suggested change

	const resizeTop = header.querySelector('.resize-handle').offsetTop;
	const resizeHandle = header.querySelector('.resize-handle');
	const resizeTop = resizeHandle ? resizeHandle.offsetTop : 0;

[Copilot]

The fallback value changed from 30px to 32px. While this might be intentional, there's no explanation in the code or comment for why this specific value was chosen. Consider adding a comment explaining the reasoning, especially since the height calculation at line 296 subtracts 4px, which relates to this value.

Suggested change

	resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 32; // fallback to 30px if no headers
	// Fallback value changed from 30px to 32px to better match header heights and related layout calculations.
	// Note: The subtraction of 14 from offsetHeight and the fallback of 32px should be kept in sync with other height calculations (e.g., line 296 subtracts 4px).
	resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 32; // fallback to 32px if no headers

[Copilot]

The magic number 4 is used here for height calculation (changed from 5). Consider extracting this as a named constant to make the code more maintainable and to clearly document its purpose (e.g., const RESIZE_HANDLE_ADJUSTMENT = 4;).