Skip to content

Fix ContentOverflow "In DataGrid" story: rows rendering at wrong height#5284

Draft
Copilot wants to merge 2 commits intomainfrom
copilot/fix-contentoverflow-vertical-alignment
Draft

Fix ContentOverflow "In DataGrid" story: rows rendering at wrong height#5284
Copilot wants to merge 2 commits intomainfrom
copilot/fix-contentoverflow-vertical-alignment

Conversation

Copy link
Contributor

Copilot AI commented Mar 6, 2026

The Comet theme sets a global getRowHeight in MuiDataGrid defaultProps (returning 60px for standard density). The story used rowHeight={100}, but getRowHeight and rowHeight are separate props — getRowHeight wins per-row, so rows were 60px, not 100px. ContentOverflow relies on height: 100% internally, so it was undersized and misaligned within the cell.

Fix

  • Replace rowHeight={100} with getRowHeight={() => 100} in the InDataGrid story. An explicit getRowHeight prop on the component overrides the theme's defaultProps.getRowHeight, ensuring rows are actually 100px.
- <DataGrid autoHeight rows={gridRows} columns={gridColumns} rowHeight={100} />
+ <DataGrid autoHeight rows={gridRows} columns={gridColumns} getRowHeight={() => 100} />

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

…f rowHeight

Co-authored-by: jamesricky <6264317+jamesricky@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix vertical alignment issue in DataGrid with ContentOverflow Fix ContentOverflow "In DataGrid" story: rows rendering at wrong height Mar 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants