Dataviews: Fix alignment issue of "Title" column header

[im3dabasia]

Closes: #68838

What?

This PR addresses the issue where the "Title" column header is not properly aligned in Dataviews when a titleField is set. The column header shifts to the left, misaligned with the search box above and the rows below.

Why?

The issue is caused by an extra margin-left on the dataviews-view-table-header.

How?

Removes the conflicting margin-left to restore proper header alignment.

Testing Instructions

1. Run npm run storybook.
2. Open the Dataviews story in Storybook.
3. Check the header alignment for the first column.
4. Ensure the "Title" column header is now properly aligned.

Screenshots

Before	After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: hbhalodia <[email protected]>
Co-authored-by: ecgan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

My intuition is that the root problem is nested elements:

<tr class="dataviews-view-table__row">
  <th scope="col">
    <span class="dataviews-view-table-header">
      <button class="dataviews-view-table-header-button">Title</button>
    </span>
  </th>
</tr>

Clickable headers should be rendered like this:

<tr class="dataviews-view-table__row">
  <th scope="col">
    <button class="dataviews-view-table-header-button">Title</button>
  </th>
</tr>

It would be a good idea to investigate why you have nested elements.

[hbhalodia]

I guess we should remove the span which is added as a parent of the clickable field. This is because, if we scroll a bit down, we have further columns' header which are added without any extra parent span.

On further debugging, found that this commit - 6b16c73#diff-3021810c0ffdc124de3220e52b952b9aa2f6e604e01383e0e4c8b0aecd5e48cf, have added the titleField column header, since it was a new change, span was added to it.

I guess if we remove this span, it would not have any regression issues and our main issue would also get resolved on titleField not being aligned.

Also, instead of removing the CSS class (it might be used other places as well) would remove the style from that place would not be a good choice at first.

Thank You,