datatrails: UI improvements (#81427)

* fix: datatrails: limit width of metric description

* fix: datatrails: use vertical radio list for long label list

* fix: datatrails: reduce spacing between header items

* fix: datatrails: reduce gap in lower toolbar

* fix: change to use Select component for longer lists

public/app/features/trails/ActionTabs/BreakdownScene.tsx

@@ -19,7 +19,7 @@ import {
   SceneQueryRunner,
   VariableDependencyConfig,
 } from '@grafana/scenes';
-import { Button, Field, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { Button, Field, Select, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { ALL_VARIABLE_VALUE } from 'app/features/variables/constants';
 
 import { getAutoQueriesForMetric } from '../AutomaticMetricQueries/AutoQueryEngine';
@@ -109,7 +109,11 @@ export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> {
     this.setState(stateUpdate);
   }
 
-  public onChange = (value: string) => {
+  public onChange = (value?: string) => {
+    if (!value) {
+      return;
+    }
+
     const variable = this.getVariable();
 
     if (value === ALL_VARIABLE_VALUE) {
@@ -125,13 +129,26 @@ export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> {
     const { labels, body, loading, value } = model.useState();
     const styles = useStyles2(getStyles);
 
+    const useHorizontalLabelSelector = labels.length <= 6;
+
     return (
       <div className={styles.container}>
         {loading && <div>Loading...</div>}
         <div className={styles.controls}>
-          <Field label="By label">
-            <RadioButtonGroup options={labels} value={value} onChange={model.onChange} />
-          </Field>
+          {!loading && (
+            <Field label="By label">
+              {useHorizontalLabelSelector ? (
+                <RadioButtonGroup options={labels} value={value} onChange={model.onChange} />
+              ) : (
+                <Select
+                  options={labels}
+                  value={value}
+                  onChange={(selected) => model.onChange(selected.value)}
+                  className={styles.select}
+                />
+              )}
+            </Field>
+          )}
           {body instanceof LayoutSwitcher && (
             <div className={styles.controlsRight}>
               <body.Selector model={body} />
@@ -172,6 +189,9 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       justifyContent: 'flex-end',
     }),
+    select: css({
+      minWidth: theme.spacing(16),
+    }),
   };
 }
 

public/app/features/trails/ActionTabs/MetricOverviewScene.tsx

@@ -92,7 +92,9 @@ export class MetricOverviewScene extends SceneObjectBase<MetricOverviewSceneStat
           <>
             <Stack direction="column" gap={0.5}>
               <Text weight={'medium'}>Description</Text>
-              {metadata?.help ? <div>{metadata?.help}</div> : <i>No description available</i>}
+              <div style={{ maxWidth: 360 }}>
+                {metadata?.help ? <div>{metadata?.help}</div> : <i>No description available</i>}
+              </div>
             </Stack>
             <Stack direction="column" gap={0.5}>
               <Text weight={'medium'}>Type</Text>

public/app/features/trails/DataTrail.tsx

@@ -233,7 +233,7 @@ function getStyles(theme: GrafanaTheme2) {
     }),
     controls: css({
       display: 'flex',
-      gap: theme.spacing(2),
+      gap: theme.spacing(1),
       alignItems: 'flex-end',
       flexWrap: 'wrap',
     }),

public/app/features/trails/MetricScene.tsx

@@ -162,7 +162,7 @@ export class MetricActionBar extends SceneObjectBase<MetricActionBarState> {
     return (
       <Box paddingY={1}>
         <div className={styles.actions}>
-          <Stack gap={2}>
+          <Stack gap={1}>
             <ToolbarButton
               variant={'canvas'}
               icon="compass"