Description

When applying a non-default alignment to a Dataview column in the table layout, the header element's spacing becomes misaligned with the rest of the data in that list.

A similar misalignment exists for the center align value, but this is harder to notice due to its minimal impact, resulting in a few pixels off.

Step-by-step reproduction instructions

1. Run npm run storybook:dev.
2. Navigate to DataViews examples.
3. Edit the default view and specify layout.styles.[column].align = end (and center). For example, the screenshots below have the following view configured:

const [ view, setView ] = useState< View >( {
		...DEFAULT_VIEW,
		fields: [ 'categories' ],
		titleField: 'title',
		descriptionField: 'description',
		mediaField: 'image',
		layout: {
			styles:
				{
					categories: {
						align: 'end', // 'center'
					},
				},
			},
		} );

Screenshots, screen recording, code snippet

align: end

align: center

Environment info

No response

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