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

vnbaaij · Copilot · web-flow · commit f8f22692f4b9 · 2025-12-09T11:47:40.000+01:00
* Fix #4378 by removing default header padding * Update src/Core/Components/DataGrid/FluentDataGrid.razor Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update veriefied files * Fix comment --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor
@@ -201,7 +201,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 @@
 
 ::deep .resize-handle {
     position: absolute;
-    top: 5px;
     right: 0;
     left: unset;
     bottom: 0;
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
@@ -188,7 +188,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
     if (!resizeColumnOnAllRows) {
         // Only use the header height when resizeColumnOnAllRows is false
         // Use the first header's height if available
-        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 30; // fallback to 30px if no headers
+        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 32; // fallback to 32px if no headers
     }
 
     headers.forEach((header) => {
@@ -201,8 +201,11 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
         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').offsetTop;
+
         // add a new resize div
-        const div = createDiv(resizeHandleHeight, isRTL);
+        const div = createDiv(resizeHandleHeight, resizeTop, isRTL);
         header.appendChild(div);
         setListeners(div, isRTL);
     });
@@ -283,14 +286,14 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
         });
     }
 
-    function createDiv(height, isRTL) {
+    function createDiv(height, top, isRTL) {
         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';
-        div.style.height = (height - 5) + 'px';
+        div.style.height = (height - 4) + 'px';
         div.style.width = '6px';
         div.style.opacity = 'var(--fluent-data-grid-header-opacity)'
 
diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -79,7 +79,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize)
         .AddStyle("height", $"{(int)Grid.RowSize}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(), 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
@@ -50,7 +50,6 @@ td.grid-cell-placeholder:after {
     font-weight: 600;
     text-align: center;
     position: relative;
-    padding: calc((var(--design-unit) + var(--focus-stroke-width) - var(--stroke-width)) * 1px) 1px calc((var(--design-unit) + var(--focus-stroke-width) - var(--stroke-width)) * 1px);
 }
 
 ::deep .col-sort-button {
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <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="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
+      <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="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <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="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
+      <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="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <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="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_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" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="cursor: pointer; margin-left: 12px;" blazor:onclick="26" blazor:onkeydown="27">➖</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="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <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="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_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" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <svg style="width: 20px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="47" blazor:onkeydown="48">
           <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="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <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="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_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" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></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="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></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="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html
diff --git a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html

Original file line number	Diff line number	Diff line change
`@@ -201,7 +201,8 @@`
`201`	`201`
`202`	`202`	`@if (ResizableColumns)`
`203`	`203`	`{`
`204`		`- <div class="resize-handle"></div>`
	`204`	`+ var top = DisplayMode == DataGridDisplayMode.Table ? "top: 4px;" : "top: 2px;";`
	`205`	`+ <div class="resize-handle" style="@top"></div>`
`205`	`206`	`}`
`206`	`207`	`</FluentDataGridCell>`
`207`	`208`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,6 @@ td.grid-cell-placeholder:after {`
`50`	`50`	`font-weight: 600;`
`51`	`51`	`text-align: center;`
`52`	`52`	`position: relative;`
`53`		`- padding: calc((var(--design-unit) + var(--focus-stroke-width) - var(--stroke-width)) * 1px) 1px calc((var(--design-unit) + var(--focus-stroke-width) - var(--stroke-width)) * 1px);`
`54`	`53`	`}`
`55`	`54`
`56`	`55`	`::deep .col-sort-button {`