[data-grid] Fix DataGrid cell text vertical alignment

[aman44444]

Fixes mui/material-ui#47118

Root cause

Cells currently rely on line-height to vertically center text:

line-height: calc(var(--height) - 1px)

This couples vertical alignment to typography. When line-height changes through theme or font settings, text alignment becomes inconsistent and the selection highlight fills the entire cell height instead of the text line.

Fix

Replace line-height centering with flex alignment:

display: flex;
align-items: center;
line-height: inherit;

Since text-overflow: ellipsis breaks when the cell becomes a flex container, direct string content is wrapped in a span and flex children are allowed to shrink so truncation works correctly.

Tested

Verified on the docs site with:

• sorting

• row selection

• cell editing

• pinned columns

• long text with ellipsis

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Deploy preview: https://deploy-preview-21731--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+211B(+0.05%)	🔺+31B(+0.03%)
@mui/x-data-grid-pro	🔺+211B(+0.04%)	🔺+55B(+0.04%)
@mui/x-data-grid-premium	🔺+211B(+0.03%)	🔺+57B(+0.03%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 092ab11