[dev-v5][DataGrid] Fix resize indicator height (when ResizeColumnOnAllRows is true) (#4392)

vnbaaij · dvoituron · web-flow · commit 790a329266fa · 2025-12-12T13:13:16.000+01:00
* Port #4383 to v5 * Update verified files * Remove IssueTester work. We'll do that later * Process comments --------- Co-authored-by: Denis Voituron <dvoituron@outlook.com>
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor
@@ -208,7 +208,8 @@
 
 				@if (ResizableColumns)
 				{
-					<div class="resize-handle"></div>
+					var top = DisplayMode == DataGridDisplayMode.Table ? "top: 4px;" : "top: 2px;";
+					<div class="resize-handle" style="@top"></div>
 				}
 			</FluentDataGridCell>
 		}
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css
@@ -67,7 +67,6 @@
 
 .fluent-data-grid .resize-handle {
     position: absolute;
-    top: 5px;
     right: 0;
     left: unset;
     bottom: 0;
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.ts b/src/Core/Components/DataGrid/FluentDataGrid.razor.ts
@@ -218,8 +218,11 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
       const resizedivs = header.querySelectorAll('.actual-resize-handle');
       resizedivs.forEach(div => div.remove());
 
+      // get the top of the first resize-handle
+      const resizeTop = (header.querySelector('.resize-handle') as HTMLElement)?.offsetTop ?? 2;
+
       // add a new resize div
-      const div = createDiv(resizeHandleHeight, isRTL);
+      const div = createDiv(resizeHandleHeight, resizeTop, isRTL);
       header.appendChild(div);
       setListeners(div, isRTL);
     });
@@ -302,10 +305,10 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
       });
     }
 
-    function createDiv(height: number, isRTL: boolean) {
+    function createDiv(height: number, top: number, isRTL: boolean) {
       const div = document.createElement('div');
       div.className = 'actual-resize-handle';
-      div.style.top = '5px';
+      div.style.top = top + 'px';
       div.style.position = 'absolute';
       div.style.cursor = 'col-resize';
       div.style.userSelect = 'none';
diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -46,7 +46,7 @@ public FluentDataGridCell(LibraryConfiguration configuration) : base(configurati
         .AddStyle("height", $"{Grid.ItemSize.ToString(CultureInfo.InvariantCulture):0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize)
         .AddStyle("height", $"{((int)Grid.RowSize).ToString(CultureInfo.InvariantCulture)}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null) && InternalGridContext.TotalItemCount > 0)
         .AddStyle("height", "100%", Grid.MultiLine)
-        .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
+        .AddStyle("min-height", "40px", Owner.RowType != DataGridRowType.Default)
         .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(CultureInfo.InvariantCulture), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0 && Grid.UseMenuService)
         .AddStyle(Owner.Style)
         .Build();
diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css
@@ -51,7 +51,7 @@
   font-weight: 600;
   text-align: center;
   position: relative;
-  padding: 5px 1px;
+  padding: 0px 1px;
 }
 
 .fluent-data-grid .col-sort-button {
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" id="xxx" appearance="subtle" blazor:onclick="x" blazor:oncontextmenu="36">
           <div class="col-title-text">Name</div>
           <svg slot="end" style="width: 20px; fill: currentColor; opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="x" blazor:onclick="x" blazor:elementreference="xxx">
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_IsFixed.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_IsFixed.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid loading" style="grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%;" aria-rowcount="1" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="min-width: 100px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="16" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="min-width: 100px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="16" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr; border-collapse: separate; border-spacing: 0;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="sticky-header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html
@@ -2,10 +2,10 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
+      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
         <div style="cursor: pointer;" blazor:onclick="x" blazor:onkeydown="x">➖</div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html
@@ -2,14 +2,14 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
+      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
         <svg style="width: 20px; fill: var(--colorBrandForeground1); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="x" blazor:onkeydown="x" blazor:elementreference="xxx">
           <title>Some rows are selected</title>
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
         </svg>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html
@@ -2,8 +2,8 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
+      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html
@@ -2,8 +2,8 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
+      <th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
         <div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>

Original file line number	Diff line number	Diff line change
`@@ -208,7 +208,8 @@`
`208`	`208`
`209`	`209`	`@if (ResizableColumns)`
`210`	`210`	`{`
`211`		`- <div class="resize-handle"></div>`
	`211`	`+ var top = DisplayMode == DataGridDisplayMode.Table ? "top: 4px;" : "top: 2px;";`
	`212`	`+ <div class="resize-handle" style="@top"></div>`
`212`	`213`	`}`
`213`	`214`	`</FluentDataGridCell>`
`214`	`215`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@`
`51`	`51`	`font-weight: 600;`
`52`	`52`	`text-align: center;`
`53`	`53`	`position: relative;`
`54`		`- padding: 5px 1px;`
	`54`	`+ padding: 0px 1px;`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.fluent-data-grid .col-sort-button {`