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

frontend/src/components/Runs/MetricChart.tsx

@@ -83,70 +83,93 @@ 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 (
-    <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="h-8 w-56" aria-label="Metric">
-        <SelectValue placeholder="Metric" />
-      </SelectTrigger>
-      <SelectContent>
-        {names.map((name) => (
-          <SelectItem key={name} value={name}>
-            {name}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <div className="flex items-center gap-1.5">
+      {axis && <AxisLabel>{axis}</AxisLabel>}
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger
+          className={cn("h-8", axis ? "w-52" : "w-56")}
+          aria-label={axis ? `${axis} axis` : "Metric"}
+        >
+          <SelectValue placeholder="Metric" />
+        </SelectTrigger>
+        <SelectContent>
+          {names.map((name) => (
+            <SelectItem key={name} value={name}>
+              {name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
   )
 }
 
-/**
- * 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.
- */
+/** What the comparison is plotted against. */
 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: TIME_AXIS, label: "vs time (s)" },
+    { value: STEP_AXIS, label: "step" },
+    { 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 (
-    <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="h-8 w-44" aria-label="Plotted against">
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <div className="flex items-center gap-1.5">
+      <AxisLabel>{axis}</AxisLabel>
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger className="h-8 w-44" aria-label={`${axis} axis`}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </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 && (