[release/8.0] Fix safari column header heights

[github-actions]

Backport of #4013 to release/8.0

/cc @adamint

Customer Impact

As seen in #3958, all columns with simple column headers in all data grids on Safari browsers are not interactable, and appear incorrectly. #4013 fixes that so that Safari appears like other browsers.

Testing

Manual testing on Edge and Safari on mac.

Risk

Low, as this css change undoes the change made in the below regression section.

Regression?

Yes, this regressed this past week. The regression was caused in fluentui-blazor by this commit, specifically here:

Microsoft Reviewers: Open in CodeFlow

[danmoseley]

@adamint can you say more than Risk: low in general. Why low?

Can you also update the template to explain why we didn't find this earlier. Was it a regression? What regressed it? Why did we miss it at the time -- do we have a gap in our Safari testing? If so, is there enough testing on this one? If not a regression, why is it vital to fix now?

Those are the kinds of questions it's good to have answered in the template when you're at a late stage like this.

[danmoseley]

I missed this:

Yes, but it is not known when exactly this regressed.

Can you please investigate a little more? It would increase confidence if we knew how we got here.

[danmoseley]

Also -- can someone else try this change on Safari (and Edge/chrome) other than @adamint (not anything about you Adam, just a 2nd pair of eyes)

[adamint]

I missed this:

Yes, but it is not known when exactly this regressed.

Can you please investigate a little more? It would increase confidence if we knew how we got here.

@danmoseley I updated the regression section with the diff in the specific commit in fluentui-blazor (cc @vnbaaij) that resulted in this bug. This is a low-risk change as it undoes the highlighted change, which worked prior to the fluentui-blazor upgrade.

[danmoseley]

Thanks, that helps a lot. Could we please have @JamesNK review this as another pair of eyes.

[danmoseley]

@JamesNK can you please review?

[JamesNK]

I tested Chrome and it continues to work well. I don't have a mac to test Safari. Good to merge.

For the future:
@vnbaaij @adamint This seems to be a fix for an issue in FluentUI's new CSS. Will this fix be fixed in FluentUI in a future release? If so, can this fix be removed from Aspire's main branch then?

[danmoseley]

Thanks @JamesNK

[vnbaaij]

I tested Chrome and it continues to work well. I don't have a mac to test Safari. Good to merge.

For the future: @vnbaaij @adamint This seems to be a fix for an issue in FluentUI's new CSS. Will this fix be fixed in FluentUI in a future release? If so, can this fix be removed from Aspire's main branch then?

@JamesNK Looking at the regression info and the change made on the Fluent side, I can't find a reason (other than thinking it had something to do with fluentui-blazor/#1932) why I included the height change in the CSS. I will revert that specific change for the next release. Once you use that version here, this fix can be removed, yes