Minor style improvements (#5678)

* Minor style improvements

* Update

* Update

* Update

Author: JamesNK

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor

@@ -166,10 +166,14 @@
                                             <div class="tick" style="grid-column: 3;"></div>
                                             <span class="tick-label" style="grid-column: 3;">@DurationFormatter.FormatDuration(trace.Duration / 4 * 2)</span>
 
+                                            @* Grid column 4 shows two labels. Hide the left aligned label on mobile to avoid them overlapping *@
                                             <div class="tick" style="grid-column: 4;"></div>
-                                            <span class="tick-label" style="grid-column: 4;">@DurationFormatter.FormatDuration(trace.Duration / 4 * 3)</span>
+                                            @if (_manager.ViewportInformation.IsDesktop)
+                                            {
+                                                <span class="tick-label" style="grid-column: 4;">@DurationFormatter.FormatDuration(trace.Duration / 4 * 3)</span>
+                                            }
 
-                                            <span class="tick-label end-tick hidden-on-mobile" style="grid-column: 4;">@DurationFormatter.FormatDuration(trace.Duration)</span>
+                                            <span class="tick-label end-tick" style="grid-column: 4;">@DurationFormatter.FormatDuration(trace.Duration)</span>
                                             <div class="tick" style="grid-column: 5;"></div>
                                         </div>
                                     </HeaderCellItemTemplate>

src/Aspire.Dashboard/Components/Resize/GridColumnManager.cs

@@ -23,6 +23,8 @@ public class GridColumnManager : ComponentBase, IDisposable
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    public ViewportInformation ViewportInformation => _gridViewportInformation ?? DimensionManager.ViewportInformation;
+
     protected override void OnInitialized()
     {
         DimensionManager.OnViewportSizeChanged += OnViewportSizeChanged;

src/Aspire.Dashboard/wwwroot/css/app.css

@@ -14,6 +14,15 @@ fluent-toolbar[orientation=horizontal] {
     width: 100%;
 }
 
+fluent-toolbar::part(positioning-region) {
+    row-gap: calc(var(--design-unit) * 1.5px);
+}
+
+fluent-toolbar::part(end) {
+    flex-wrap: wrap;
+    row-gap: calc(var(--design-unit) * 1.5px);
+}
+
 /* Hide any web components that haven't been */
 :not(:defined),
 .before-upgrade {
@@ -620,7 +629,3 @@ fluent-data-grid-cell.no-ellipsis {
 .layout fluent-toolbar > .fluent-input-label {
     margin-bottom: 0;
 }
-
-.page-content-container fluent-toolbar::part(end) {
-    flex-wrap: wrap;
-}