Description

When we have a titleField in Dataviews, the column header is not aligned properly.

This issue can be seen in storybook - see https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs:

In the case above, we have titleField: 'title', and we can see that the "Title" column header is shifted to the left by a few pixels, and it is not aligned with the search box above it and the rows below it.

The cause of the problem seems to be this <span class="dataviews-view-table-header"> with margin-left: -8px;:

In comparison, if we look at Dataviews with no titleField, the first column header would align nicely:

In this "Title" column, there is no <span class="dataviews-view-table-header">:

Step-by-step reproduction instructions

1. Use a Dataviews, without a titleField. You should see that the first column header is aligned perfectly.
2. Set a titleField. You should see that the first column header is NOT aligned perfectly.

Screenshots, screen recording, code snippet

No response

Environment info

I noticed this issue when I am using Dataviews in a plugin. I'm using bundled Dataviews by doing import { DataViews } from '@wordpress/dataviews/wp'.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure