From 51c0f7c5e7c968e44400cbd60c8e440dac90d723 Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Sun, 23 Feb 2025 12:16:09 +0530
Subject: [PATCH] Dataviews: Fix alignment issue of "Title" column header
 (#68840)

* fix: Alignment issue of first header in dataviews

* fix: Remove span parent of title field

* fix: Remove inline css and remove extra css code

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: ecgan <ecgan@git.wordpress.org>
---
 .../src/dataviews-layouts/table/index.tsx     | 42 +++++++------------
 .../src/dataviews-layouts/table/style.scss    |  4 +-
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 8e69e7353ce921..b3789df8fbb68a 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -140,12 +140,7 @@ function TableRow< Item >( {
 			} }
 		>
 			{ hasBulkActions && (
-				<td
-					className="dataviews-view-table__checkbox-column"
-					style={ {
-						width: '1%',
-					} }
-				>
+				<td className="dataviews-view-table__checkbox-column">
 					<div className="dataviews-view-table__cell-content-wrapper">
 						<DataViewsSelectionCheckbox
 							item={ item }
@@ -301,9 +296,6 @@ function ViewTable< Item >( {
 						{ hasBulkActions && (
 							<th
 								className="dataviews-view-table__checkbox-column"
-								style={ {
-									width: '1%',
-								} }
 								scope="col"
 							>
 								<BulkSelectionCheckbox
@@ -317,23 +309,21 @@ function ViewTable< Item >( {
 						) }
 						{ hasPrimaryColumn && (
 							<th scope="col">
-								<span className="dataviews-view-table-header">
-									{ titleField && (
-										<ColumnHeaderMenu
-											ref={ headerMenuRef(
-												titleField.id,
-												0
-											) }
-											fieldId={ titleField.id }
-											view={ view }
-											fields={ fields }
-											onChangeView={ onChangeView }
-											onHide={ onHide }
-											setOpenedFilter={ setOpenedFilter }
-											canMove={ false }
-										/>
-									) }
-								</span>
+								{ titleField && (
+									<ColumnHeaderMenu
+										ref={ headerMenuRef(
+											titleField.id,
+											0
+										) }
+										fieldId={ titleField.id }
+										view={ view }
+										fields={ fields }
+										onChangeView={ onChangeView }
+										onHide={ onHide }
+										setOpenedFilter={ setOpenedFilter }
+										canMove={ false }
+									/>
+								) }
 							</th>
 						) }
 						{ columns.map( ( column, index ) => {
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 5a4ac01b566f74..02ccbe4fed7bdd 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -24,6 +24,7 @@
 
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
+			width: 1%;
 		}
 	}
 	tr {
@@ -37,8 +38,7 @@
 		th:first-child {
 			padding-left: $grid-unit-60;
 
-			.dataviews-view-table-header-button,
-			.dataviews-view-table-header {
+			.dataviews-view-table-header-button {
 				margin-left: - #{$grid-unit-10};
 			}
 		}