Fix inconsistent trace detail spacing

[JamesNK]

Adding an icon creating inconsistent spacing. There isn't a way to perfectly balance everything (the current color bar for client spans is thinner than icons) but this is the best layout I could find.

Before:

After:

Microsoft Reviewers: Open in CodeFlow

[tlmii]

I'm a little worried about all the magic numbers here (we haven't been great about it in other places, but I ran into it during the design changes work and realized I should bring it up). The below write-up is for anyone not familiar with the design unit work, not so much the author here.

Generally with fast/fluent you want to base things on the --design-unit and --density css custom properties so that you can tweak those and everything shifts proportionally. The default design unit (and what we use) is 4 (no units) and the default density is 0 (and usually just in a range of -2 to 2). A fairly common example would be to do calc((var(--design-unit) + var(--density)) * 1px). At the default values that'd be 4px. But we could say "hey this control needs to more/less dense" and just tweak the density value +/- a couple and the whole layout would expand/shrink accordingly. Or we could decide that for mobile or whole site needed to have elements that are slightly larger so we should bump the design unit up to 5 or 6 to be more touch-friendly.

Strictly as an example (I haven't looked at what this actually looks like when running, it wouldn't match what you have pixel-for-pixel; and this example only uses the design unit to keep it somewhat brief):

var isServerKind = context.Span.Kind == OtlpSpanKind.Server;
// Indent the span name based on the depth of the span.
var baseDepth = (context.Depth - 1);

// We want to have consistent margin for both client and server spans.
string spanNameContainerStyle;
if (!isServerKind)
{
    // Client span has 19px extra content:
    // - 1 design unit border
    // - 2 design unit padding-left
    // - 1 design unit extra margin-left
    spanNameContainerStyle = $"--base-depth: {baseDepth}; --extraDepth: 1; margin-left: calc((var(--design-unit) * var(--baseDepth) * 4px) + (var(--design-unit) * var(--extraDepth) * 1px)); border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: calc(var(--design-unit) * 1px); border-left-style: solid; padding-left: calc(var(--design-unit) * 2px);";
}
else
{
    // Server span has 19px extra content:
    // - 16px icon
    // - 3px padding-left
    spanNameContainerStyle = $"--base-depth: {baseDepth}; --extraDepth: 0; margin-left: calc((var(--design-unit) * var(--baseDepth) * 4px) + (var(--design-unit) * var(--extraDepth) * 1px));";
}

You could also then, possibly move the margin and everything after it into a stylesheet and just have the --base-depth and --extra-depth be inline. That'd keep the style part that has to be in C#/razor code a little more clean.

[kvenkatrajan]

Approved- please file follow up issue for spacing with design units.

[joperezr]

Discussed this offline with @kvenkatrajan and @tlmii , and we agreed to take this for preview 3 and to log an issue regarding the concern raised by @tlmii above.