Name the comparison's X and Y beside their pickers, not in every option

frontend/src/components/Runs/MetricChart.tsx

@@ -83,20 +83,42 @@ export function RunMetricChart({
   )
 }
 
+/**
+ * The axis a picker sets, written beside it rather than into every option.
+ *
+ * The dropdown then lists names — "step", "loss" — instead of repeating "vs"
+ * once per row, and which axis is being set is said once, where it belongs.
+ */
+function AxisLabel({ children }: { children: string }) {
+  return (
+    <span className="font-medium text-muted-foreground text-xs" aria-hidden>
+      {children}
+    </span>
+  )
+}
+
 /** The metric picker both the detail and the comparison sit under. */
 export function MetricPicker({
   names,
   value,
+  axis,
   onChange,
 }: {
   names: string[]
   value: string
+  /** Named where the chart has an axis for it to be; bare on its own. */
+  axis?: string
   onChange: (name: string) => void
 }) {
   if (names.length === 0) return null
   return (
+    <div className="flex items-center gap-1.5">
+      {axis && <AxisLabel>{axis}</AxisLabel>}
       <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="h-8 w-56" aria-label="Metric">
+        <SelectTrigger
+          className={cn("h-8", axis ? "w-52" : "w-56")}
+          aria-label={axis ? `${axis} axis` : "Metric"}
+        >
           <SelectValue placeholder="Metric" />
         </SelectTrigger>
         <SelectContent>
@@ -107,37 +129,37 @@ export function MetricPicker({
           ))}
         </SelectContent>
       </Select>
+    </div>
   )
 }
 
-/**
+/** What the comparison is plotted against. */
- * What the comparison is plotted against.
- *
- * Doubles as the axis label — it sits directly above the chart, and naming the
- * axis twice is one caption too many.
- */
 export function AxisPicker({
   names,
   metric,
   value,
+  axis = "X",
   onChange,
 }: {
   names: string[]
   /** Excluded from the choices: a metric against itself is a straight line. */
   metric: string
   value: string
+  axis?: string
   onChange: (x: string) => void
 }) {
   const options = [
-    { value: STEP_AXIS, label: "vs step" },
+    { value: STEP_AXIS, label: "step" },
-    { value: TIME_AXIS, label: "vs time (s)" },
+    { value: TIME_AXIS, label: "time (s)" },
     ...names
       .filter((name) => name !== metric)
-      .map((name) => ({ value: name, label: `vs ${name}` })),
+      .map((name) => ({ value: name, label: name })),
   ]
   return (
+    <div className="flex items-center gap-1.5">
+      <AxisLabel>{axis}</AxisLabel>
       <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="h-8 w-44" aria-label="Plotted against">
+        <SelectTrigger className="h-8 w-44" aria-label={`${axis} axis`}>
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -148,5 +170,6 @@ export function AxisPicker({
           ))}
         </SelectContent>
       </Select>
+    </div>
   )
 }

frontend/src/components/Runs/RunsScreen.tsx

@@ -500,6 +500,7 @@ function Compare({
         <MetricPicker
           names={names}
           value={metric}
+          axis="Y"
           onChange={(name) => update({ metric: name })}
         />
         {names.length > 0 && (