[dashpages] Dashpage layout improvements

[drewnoakes]

Make dashpage responsive to container, not viewport

FluentGrid uses @media queries for breakpoints, which work on the window size (viewport area). However we have a splitter in this UI, and dragging it should cause the dashpage area to relayout as the container size changes.

This change removes FluentGrid and instead uses flexbox layout directly.

Note

This PR is to the feature/dashpages branch, not main.

Before

After

Microsoft Reviewers: Open in CodeFlow

[JamesNK]

Why is a section element instead of div?

[drewnoakes]

section gives a bit more semantics, suggesting it's a larger area of content. Similarly, article is used for each chart. This theoretically gives tools that inspect the DOM (such as screen readers) more info about the DOM. divs get used for non-semantic layout.

[JamesNK]

I wouldn't worry about being semantically correct. We're using div everywhere for block content and span for inline content.

[adamint]

It is preferred to use the semantically correct element. I would not change to div just for the sake of it

[JamesNK]

We aren't using semantically correct elements in other places. It seems like a non-goal and makes it different from everywhere else in the app which is always to use div. Often being consistently correct is better than being technically correct.

But arguing over html elements is the least productive thing in the world so if you think this is best then go ahead.

[JamesNK]

nit: string.Equals + StringComparison.OtlpInstrumentName is more idomatic in this sitation

[drewnoakes]

Seems subjective. I prefer this form as it's less code and feels more natural to me to use the right object for the operation, than passing an enum to a method to modify its behaviour. I feel like StringComparison only exists for historical reasons, and could be removed from the library if it weren't for backcompat requirements.

[JamesNK]

StringComparer is for non-string only, generic scenarios, e.g. the key comparer in a dictionary, or sorting in LINQ:
https://learn.microsoft.com/en-us/dotnet/standard/base-types/best-practices-strings#methods-that-perform-string-comparison-indirectly

StringComparison is for string operations:
https://learn.microsoft.com/en-us/dotnet/standard/base-types/best-practices-strings#recommendations-for-string-usage

[JamesNK]

This SO answer summerizies it well: https://stackoverflow.com/a/8918112

I feel like we've had this conversation before.

[JamesNK]

Could you add a small comment here that says what this does

[drewnoakes]

Can you explain what's unclear? Do you want me to explain how flex works?

[JamesNK]

I don't know what 1 1 25% means. I'm more experienced with css grid than flex box and I'm guessing most people who see this won't know what it does.