Dashboard UI issues with Safari

[radical]

macOS Sonoma 14.4.1 Safari Version 17.4.1 (19618.1.15.11.14)

This is with a build from main with HEAD at 5fec81174cd305c806f66d4a532188f49bace69c.

1. The headers for the last few columns are at the bottom
2. The urls are not clickable, and neither are the View buttons.

The following screenshot shows that the cell for the header row is too tall, and covers the other cells of the same column.

Related issue: https://github.com/dotnet/aspire/issues/2272

cc @timheuer @adamint @JamesNK

[tlmii]

@adamint Can you take a look when you get the chance? It does seem similar to the issue in #2272 fixed in #2894 but not exactly the same.

[adamint]

I can repro this, it is a blocking issue for Safari users.

@vnbaaij for context

• this is happening only for columns whose headers are not fluent-buttons
• this bug repros on sometimes on the demo page
• it seems to be caused by .col-title's align-items: center property. changing this value to baseline results in UI being shown as expected

[kvenkatrajan]

FYI - @danmoseley

@adamint would the work around to add sorting work for GA? Im not sure we want to take a new fluent upgrade for GA at this time.

[vnbaaij]

Testing on Windows shows mixing the sort buttons and setting baseline for non-buttons leads to things not lining up:

I do not have a Safari device to test things on...

[adamint]

Clarifying that I was not suggesting baseline as a solution here, I don’t know enough yet to suggest one.

[kvenkatrajan]

@vnbaaij, @adamint, @tlmii - thoughts on how to remediate this? We need this fixed for GA (snap date 5/2)

[vnbaaij]

@adamint I would try to get a Safari specific CSS fix in for solving this, if possible. Maybe it works/help if we target those specific headers with -webkit-box-align

From MDN: Use the CSS flexible box layout with the standard align-items property instead.

Or use the option Kay suggeste and make it a sortable column