fix: vertical alignment in larger row heights

[Tanush-J]

Contributes to #3548

After this content is top-aligned in Extra large row height.

What did you change?

Changed the default value of verticalAlign property from 'center' to 'top' in DatagridContent.js file.

How did you test and verify your work?

273671150-a47c90a3-628a-4beb-aee2-7c3a5ba80342.mp4

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	0e9502a
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/65256cba5b3e1d0008c184ba
😎 Deploy Preview	https://deploy-preview-3568--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[Tanush-J]

I have read the DCO document and I hereby sign the DCO.

[matthewgallo]

Thanks for looking at this @Tanush-J! There may be some missing styles, if you look at one of the stories for the Datagrid that includes selectable rows, you'll notice that the checkbox and the row content do not align.

See issue below:

You can use the Batch action story as an example to view this behavior.

Instead of changing verticalAlign default value to top, I think it would be better to do this by targeting the xl class, something like:

.cds--data-table--xl .c4p--datagrid__head,
.cds--data-table--xl .c4p--datagrid__carbon-row {
  align-items: flex-start;
}

This could be added to _RowSizeDropdown.scss, replacing cds--data-table and c4p--datagrid with the appropriate sass variables.

[Tanush-J]

Ok I will look into this

[Tanush-J]

After Adding that code I'm getting this result, I think something else must be done regarding this

I've added this code to _RowSizeDropdown.scss

.#{c4p-settings.$carbon-prefix}--data-table--xl .#{variables.$block-class}__head,
.#{c4p-settings.$carbon-prefix}--data-table--xl .#{variables.$block-class}__carbon-row {
  align-items: flex-start;
}

[matthewgallo]

Yes, you're correct. There will be some more styling changes required given the different variations of this component.

[matthewgallo]

Hey @Tanush-J, we had to address this issue in a separate PR. We'd welcome future contributions!