Skip to content

Fix safari column header heights#4013

Merged
adamint merged 1 commit intomicrosoft:mainfrom
adamint:dev/adamint/3958-fix-column-headers
Apr 29, 2024
Merged

Fix safari column header heights#4013
adamint merged 1 commit intomicrosoft:mainfrom
adamint:dev/adamint/3958-fix-column-headers

Conversation

@adamint
Copy link
Copy Markdown
Member

@adamint adamint commented Apr 29, 2024

Fixes #3958

Taken from the comment I made in the css:

fluent-data-grid-cells have a height of 100%, which should correspond to the height of their parent fluent-data-grid-row.
On Safari only, this is not the case; height actually computes to the grid height (incorrectly). We can force column headers to take the height of their parent by inheriting the height of their row.

Before, Safari
image

Before, Chrome/Edge
image

After, Safari
image

After, Chrome/Edge
image

Microsoft Reviewers: Open in CodeFlow

@ghost ghost added the area-codeflow for labeling automated codeflow. intentionally a different color! label Apr 29, 2024
@tlmii
Copy link
Copy Markdown
Member

tlmii commented Apr 29, 2024

Testing this here locally on windows with a couple browsers and it seems fine. I can't validate the Safari side. It'd be nice to see if we can find an actual bug logged on Safari about this (both from a tracking perspective, so we can undo the hack if it ever gets fixed, and from the perspective of making sure we fully understand why Safari is behaving the way it is). But this seems to fix it for us right now. Thanks @adamint for digging into this!

@kvenkatrajan
Copy link
Copy Markdown

kvenkatrajan commented Apr 29, 2024

@danmoseley / @joperezr are you ok with backporting this to to 8.0 for GA?

@adamint
Copy link
Copy Markdown
Member Author

adamint commented Apr 29, 2024

@tlmii I can file a follow-up issue to make a minimal repro of this?

@adamint adamint merged commit 08c26f1 into microsoft:main Apr 29, 2024
@adamint
Copy link
Copy Markdown
Member Author

adamint commented Apr 29, 2024

/backport to release/8.0

@github-actions
Copy link
Copy Markdown
Contributor

Started backporting to release/8.0: https://github.com/dotnet/aspire/actions/runs/8883981932

@github-actions github-actions Bot locked and limited conversation to collaborators Jun 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-codeflow for labeling automated codeflow. intentionally a different color!

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dashboard UI issues with Safari

4 participants