CR Feedback

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

@@ -21,10 +21,6 @@
     display: inline !important;
 }
 
-::deep .trace-view-grid fluent-data-grid-row[row-type="default"]:hover {
-    background-color: var(--neutral-fill-hover);
-}
-
 ::deep .trace-view-grid fluent-data-grid-row[row-type="default"] {
     cursor: pointer;
 }

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

@@ -84,6 +84,17 @@ fluent-toolbar[orientation=horizontal] {
     color-scheme: dark;
 }
 
+/*
+    Override the `cursor: pointer` in the default styles from fluentui-blazor since
+    we don't have selection implemented and the pointer doesn't really make sense.
+    The `fluent-data-grid-row[role='row']` part added to the beginning is a bit of
+    a hack to get the specificity higher than the default style to avoid using
+    `!important` just in case there's a reason to to override further later.
+*/
+fluent-data-grid-row[role='row'].hover:not([row-type='header'],[row-type='sticky-header']):hover {
+    cursor: auto;
+}
+
 [data-theme="light"] {
     color-scheme: light;
 }

src/Aspire.Dashboard/wwwroot/js/app-theme.js

@@ -201,6 +201,12 @@ function isDark(color) {
     return color.relativeLuminance <= darknessLuminanceTarget;
 }
 
+/**
+ * Creates additional design tokens that are used to define the hover colors for the neutral layers
+ * used in the site theme (neutral-layer-1 and neutral-layer-2, specifically). Unlike other -hover
+ * variants, these are not created by the design system by default so we need to create them ourselves.
+ * This is a lightly tweaked variant of other hover recipes used in the design system.
+ */
 function createAdditionalDesignTokens() {
     const neutralLayer1HoverLightDelta = DesignToken.create({ name: 'neutral-layer-1-hover-light-delta', cssCustomPropertyName: null }).withDefault(3);
     const neutralLayer1HoverDarkDelta = DesignToken.create({ name: 'neutral-layer-1-hover-dark-delta', cssCustomPropertyName: null }).withDefault(2);