From 8a1d299a93288b22498e53f57b6310d40aa3ca55 Mon Sep 17 00:00:00 2001
From: James Newton-King <james@newtonking.com>
Date: Fri, 26 Jan 2024 11:15:52 +0800
Subject: [PATCH 1/2] Fix inconsistent trace detail spacing

---
 .../Components/Pages/TraceDetail.razor        | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
index 5726856f424..a5c4194a7e4 100644
--- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
+++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
@@ -56,10 +56,26 @@
                         <div class="col-long-content" title="@context.GetTooltip()" @onclick="() => OnShowProperties(context)">
                             @{
                                 var isServerKind = context.Span.Kind == OtlpSpanKind.Server;
-                                var spanNameContainerStyle = $"margin-left: {(context.Depth - 1) * 15}px;";
+                                // Indent the span name based on the depth of the span.
+                                var marginLeft = (context.Depth - 1) * 15;
+
+                                // We want to have consistent margin for both client and server spans.
+                                string spanNameContainerStyle;
                                 if (!isServerKind)
                                 {
-                                    spanNameContainerStyle += $"border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 5px;";
+                                    // Client span has 19px extra content:
+                                    // - 5px border.
+                                    // - 9px padding-left;
+                                    // - 5px extra margin-left.
+                                    marginLeft += 5;
+                                    spanNameContainerStyle = $"margin-left: {marginLeft}px; border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 9px;";
+                                }
+                                else
+                                {
+                                    // Server span has 19px extra content:
+                                    // - 16px icon.
+                                    // - 3px padding-left;
+                                    spanNameContainerStyle = $"margin-left: {marginLeft}px;";
                                 }
                             }
                             <span class="span-name-container" style="@spanNameContainerStyle">

From 49e98f36ab1221751e0445d4ceca3c8b8bbd3a3b Mon Sep 17 00:00:00 2001
From: James Newton-King <james@newtonking.com>
Date: Fri, 26 Jan 2024 11:16:50 +0800
Subject: [PATCH 2/2] Clean up

---
 .../Components/Pages/TraceDetail.razor                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
index a5c4194a7e4..d6ee2c9863b 100644
--- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
+++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
@@ -64,17 +64,17 @@
                                 if (!isServerKind)
                                 {
                                     // Client span has 19px extra content:
-                                    // - 5px border.
-                                    // - 9px padding-left;
-                                    // - 5px extra margin-left.
+                                    // - 5px border
+                                    // - 9px padding-left
+                                    // - 5px extra margin-left
                                     marginLeft += 5;
                                     spanNameContainerStyle = $"margin-left: {marginLeft}px; border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 9px;";
                                 }
                                 else
                                 {
                                     // Server span has 19px extra content:
-                                    // - 16px icon.
-                                    // - 3px padding-left;
+                                    // - 16px icon
+                                    // - 3px padding-left
                                     spanNameContainerStyle = $"margin-left: {marginLeft}px;";
                                 }
                             }