From c874fbc4f208b79e74f650e1dd531436915ded3a Mon Sep 17 00:00:00 2001
From: Christopher Tso <christso@gmail.com>
Date: Tue, 7 Jul 2026 10:48:17 +0200
Subject: [PATCH 1/2] style(dashboard): sharpen dark results command center

---
 apps/dashboard/src/components/EvalDetail.tsx  | 62 ++++++++++++-------
 apps/dashboard/src/components/ResultTable.tsx | 48 +++++++++-----
 apps/dashboard/src/components/RunDetail.tsx   |  8 +--
 apps/dashboard/src/components/ScoreBar.tsx    | 19 ++++--
 apps/dashboard/src/components/StatsCards.tsx  | 12 ++--
 apps/dashboard/src/styles/globals.css         |  5 ++
 6 files changed, 103 insertions(+), 51 deletions(-)

diff --git a/apps/dashboard/src/components/EvalDetail.tsx b/apps/dashboard/src/components/EvalDetail.tsx
index 8c886a8ab..ed1066e5b 100644
--- a/apps/dashboard/src/components/EvalDetail.tsx
+++ b/apps/dashboard/src/components/EvalDetail.tsx
@@ -331,7 +331,7 @@ function SourceTab({ result }: { result: EvalResult }) {
   const traceability: SourceTraceability | undefined = result.source_traceability;
   if (!traceability || traceability.status !== 'captured') {
     return (
-      <div className="rounded-lg border border-gray-800 bg-gray-900 p-4">
+      <div className="rounded-lg border border-gray-800 bg-gray-950/80 p-4 ring-1 ring-white/5">
         <h4 className="text-sm font-medium text-gray-300">Source metadata</h4>
         <p className="mt-2 text-sm text-gray-500">
           {traceability?.message ?? 'Source metadata was not captured for this run.'}
@@ -493,7 +493,7 @@ function ChecksTab({ result, projectId }: { result: EvalResult; projectId?: stri
   return (
     <div className="space-y-6">
       {/* Overall score */}
-      <div className="rounded-lg border border-gray-800 bg-gray-900 p-4">
+      <div className="rounded-lg border border-gray-800 bg-gray-950/80 p-4 ring-1 ring-white/5">
         <div className="flex items-center gap-4">
           <span className="text-sm font-medium text-gray-400">Overall score</span>
           <div className="flex-1">
@@ -567,9 +567,9 @@ function ChecksTab({ result, projectId }: { result: EvalResult; projectId?: stri
 
 function RunMetricRow({ label, value }: { label: string; value: string | undefined }) {
   return (
-    <div className="rounded-lg border border-gray-800 bg-gray-900 p-3">
+    <div className="rounded-lg border border-gray-800 bg-gray-950/80 p-3 ring-1 ring-white/5">
       <div className="text-xs font-medium uppercase tracking-wider text-gray-500">{label}</div>
-      <div className="mt-1 font-mono text-sm text-gray-200">{value ?? '-'}</div>
+      <div className="mt-1 font-mono text-sm text-gray-100">{value ?? '-'}</div>
     </div>
   );
 }
@@ -784,9 +784,15 @@ function gradingVerdictLabel(pass: boolean | undefined): string {
 }
 
 function gradingVerdictClass(pass: boolean | undefined): string {
-  if (pass === true) return 'border-emerald-900/50 bg-emerald-950/20 text-emerald-300';
-  if (pass === false) return 'border-red-900/50 bg-red-950/20 text-red-300';
-  return 'border-gray-800 bg-gray-950/50 text-gray-300';
+  if (pass === true) return 'border-emerald-800/60 bg-emerald-950/30 text-emerald-200';
+  if (pass === false) return 'border-red-700/70 bg-red-950/40 text-red-200';
+  return 'border-gray-700 bg-gray-950/70 text-gray-300';
+}
+
+function gradingPanelClass(pass: boolean | undefined): string {
+  if (pass === true) return 'border-emerald-900/50 bg-emerald-950/15';
+  if (pass === false) return 'border-red-900/60 bg-red-950/15';
+  return 'border-gray-800 bg-gray-900/70';
 }
 
 function assertionLabel(
@@ -815,9 +821,19 @@ function NamedScoresGrid({ scores }: { scores: Record<string, number> | undefine
   if (!scores || Object.keys(scores).length === 0) return null;
   return (
     <div className="grid gap-3 md:grid-cols-3">
-      {Object.entries(scores).map(([name, value]) => (
-        <RunMetricRow key={name} label={name} value={formatPercent(value)} />
-      ))}
+      {Object.entries(scores).map(([name, value]) => {
+        const tone =
+          value >= 0.8 ? 'text-emerald-300' : value >= 0.5 ? 'text-amber-300' : 'text-red-300';
+        return (
+          <div
+            key={name}
+            className="rounded-lg border border-gray-800 bg-gray-950/70 p-3 ring-1 ring-white/5"
+          >
+            <div className="text-xs font-medium uppercase tracking-wider text-gray-500">{name}</div>
+            <div className={`mt-1 font-mono text-sm ${tone}`}>{formatPercent(value)}</div>
+          </div>
+        );
+      })}
     </div>
   );
 }
@@ -825,7 +841,7 @@ function NamedScoresGrid({ scores }: { scores: Record<string, number> | undefine
 function MetadataBlock({ metadata }: { metadata: GradingJsonObject | undefined }) {
   if (!metadata || Object.keys(metadata).length === 0) return null;
   return (
-    <details className="rounded-lg border border-gray-800 bg-gray-950/50 p-3">
+    <details className="rounded-lg border border-gray-800 bg-gray-950/80 p-3">
       <summary className="cursor-pointer text-sm font-medium text-gray-300">Metadata</summary>
       <pre className="mt-3 max-h-64 overflow-auto text-xs text-gray-300">
         {JSON.stringify(metadata, null, 2)}
@@ -838,15 +854,19 @@ function OptionalScoreBar({ score }: { score: number | undefined }) {
   if (score == null) {
     return <div className="h-2 rounded-full bg-gray-800" />;
   }
-  return <ScoreBar score={score} />;
+  return <ScoreBar score={score} showLabel={false} />;
 }
 
 function GradingAggregateSummary({ result }: { result: GradingComponentResult }) {
   return (
-    <div className="space-y-4 rounded-lg border border-gray-800 bg-gray-900 p-4">
+    <div
+      className={`space-y-4 rounded-lg border p-4 ring-1 ring-white/5 ${gradingPanelClass(
+        result.pass,
+      )}`}
+    >
       <div className="grid gap-3 md:grid-cols-[minmax(9rem,12rem)_1fr] md:items-center">
         <div
-          className={`rounded-lg border px-3 py-2 text-sm font-medium ${gradingVerdictClass(
+          className={`rounded-lg border px-3 py-2 text-sm font-semibold ${gradingVerdictClass(
             result.pass,
           )}`}
         >
@@ -855,12 +875,12 @@ function GradingAggregateSummary({ result }: { result: GradingComponentResult })
         <div className="min-w-0">
           <div className="mb-1 flex items-center justify-between gap-3 text-xs text-gray-500">
             <span>Aggregate score</span>
-            <span className="font-mono">{formatPercent(result.score)}</span>
+            <span className="font-mono text-gray-300">{formatPercent(result.score)}</span>
           </div>
           <OptionalScoreBar score={result.score} />
         </div>
       </div>
-      {result.reason ? <p className="text-sm text-gray-300">{result.reason}</p> : null}
+      {result.reason ? <p className="text-sm text-gray-200">{result.reason}</p> : null}
       <NamedScoresGrid scores={result.namedScores} />
       <MetadataBlock metadata={result.metadata} />
     </div>
@@ -917,7 +937,7 @@ function GradingComponentNode({
       <div className="grid gap-3 md:grid-cols-[minmax(10rem,1fr)_minmax(8rem,12rem)] md:items-center">
         <div className="min-w-0">
           <div className="flex min-w-0 flex-wrap items-center gap-2">
-            <span className="font-medium text-gray-200">{label.title}</span>
+            <span className="font-medium text-gray-100">{label.title}</span>
             <span
               className={`rounded-md border px-1.5 py-0.5 text-[11px] font-medium ${gradingVerdictClass(
                 component.pass,
@@ -935,20 +955,20 @@ function GradingComponentNode({
           ) : null}
         </div>
         <div className="min-w-0">
-          <div className="mb-1 text-right font-mono text-xs text-gray-500">
+          <div className="mb-1 text-right font-mono text-xs text-gray-400">
             {formatPercent(component.score)}
           </div>
           <OptionalScoreBar score={component.score} />
         </div>
       </div>
-      {component.reason ? <p className="text-sm text-gray-300">{component.reason}</p> : null}
+      {component.reason ? <p className="mt-1 text-sm text-gray-200">{component.reason}</p> : null}
     </div>
   );
 
   return (
     <details
       open={depth === 0}
-      className="rounded-lg border border-gray-800 bg-gray-900 p-3"
+      className={`rounded-lg border p-3 ring-1 ring-white/5 ${gradingPanelClass(component.pass)}`}
       style={{ marginLeft: depth > 0 ? `${Math.min(depth, 4) * 1}rem` : undefined }}
     >
       <summary className="flex cursor-pointer list-none items-start gap-3">
@@ -1030,7 +1050,7 @@ function ArtifactGradingTab({
           <button
             type="button"
             onClick={() => onOpenFile(gradingPath)}
-            className="rounded-md border border-gray-700 px-3 py-1.5 text-xs text-gray-300 transition-colors hover:border-cyan-900/60 hover:text-cyan-300"
+            className="rounded-md border border-gray-700 bg-gray-950/80 px-3 py-1.5 text-xs text-gray-300 transition-colors hover:border-cyan-800/70 hover:text-cyan-200"
           >
             Open grading JSON
           </button>
diff --git a/apps/dashboard/src/components/ResultTable.tsx b/apps/dashboard/src/components/ResultTable.tsx
index c1968d866..4a1a57de4 100644
--- a/apps/dashboard/src/components/ResultTable.tsx
+++ b/apps/dashboard/src/components/ResultTable.tsx
@@ -317,7 +317,7 @@ export function ResultTable({
         </p>
       </div>
 
-      <div className="space-y-3 rounded-lg border border-gray-800 bg-gray-900/40 p-3">
+      <div className="space-y-3 rounded-lg border border-gray-800 bg-gray-950/80 p-3 ring-1 ring-white/5">
         <div className="flex flex-wrap gap-2">
           {RESULT_TABLE_VIEW_PRESETS.map((preset) => (
             <button
@@ -326,8 +326,8 @@ export function ResultTable({
               onClick={() => updateState({ view: preset.id })}
               className={`inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm transition-colors ${
                 model.state.view === preset.id
-                  ? 'border-cyan-900/60 bg-cyan-950/30 text-cyan-300'
-                  : 'border-gray-800 bg-gray-950/70 text-gray-400 hover:border-gray-700 hover:text-gray-200'
+                  ? 'border-cyan-700/70 bg-cyan-950/40 text-cyan-200'
+                  : 'border-gray-800 bg-gray-950/80 text-gray-400 hover:border-gray-600 hover:bg-gray-900/70 hover:text-gray-100'
               }`}
             >
               <span>{preset.label}</span>
@@ -494,12 +494,12 @@ export function ResultRowsTable({
   onOpenTrialDetail: (rowKey: string, trial: EvalCaseTrial) => void;
 }) {
   return (
-    <div className="max-w-full overflow-x-auto rounded-lg border border-gray-800">
+    <div className="max-w-full overflow-x-auto rounded-lg border border-gray-800 bg-gray-950/80 ring-1 ring-white/5">
       <table
         className="w-full whitespace-nowrap text-left text-sm"
         style={{ minWidth: `${resultTableMinWidth(visibleColumns)}px` }}
       >
-        <thead className="border-b border-gray-800 bg-gray-900/50">
+        <thead className="border-b border-gray-800 bg-gray-900/80">
           <tr>
             {visibleColumns.map((column) => (
               <th key={column.id} className={columnHeaderClassName(column.id)} title={column.label}>
@@ -514,7 +514,7 @@ export function ResultRowsTable({
             ))}
           </tr>
         </thead>
-        <tbody className="divide-y divide-gray-800/50">
+        <tbody className="divide-y divide-gray-800/70">
           {rows.map((row) => {
             const repeatGroup = repeatGroupsByRowKey.get(row.key);
             const isSelected = selectedRowKey === row.key && !selectedTrialPath;
@@ -523,8 +523,12 @@ export function ResultRowsTable({
               <Fragment key={row.key}>
                 <tr
                   className={`cursor-pointer transition-colors ${
-                    isSelected ? 'bg-cyan-950/20' : 'hover:bg-gray-900/30'
-                  } ${repeatGroup ? 'bg-gray-950/20' : ''}`}
+                    isSelected
+                      ? 'bg-cyan-950/30 ring-1 ring-inset ring-cyan-800/60'
+                      : row.status === 'failing'
+                        ? 'bg-red-950/10 hover:bg-red-950/20'
+                        : 'hover:bg-gray-900/50'
+                  } ${repeatGroup ? 'bg-gray-950/30' : ''}`}
                   onClick={() => onOpenDetail(row.key)}
                   onKeyDown={(event) => {
                     if (event.key === 'Enter' || event.key === ' ') {
@@ -760,9 +764,16 @@ function ResultStatusSymbol({ status, label }: { status: string; label: string }
   const passing = status === 'passing';
   const warning = status === 'error' || status === 'partial';
   const symbol = passing ? CHECK_MARK : CROSS_MARK;
-  const tone = passing ? 'text-emerald-300' : warning ? 'text-amber-300' : 'text-red-300';
+  const tone = passing
+    ? 'border-emerald-900/60 bg-emerald-950/30 text-emerald-300'
+    : warning
+      ? 'border-amber-900/60 bg-amber-950/30 text-amber-300'
+      : 'border-red-800/70 bg-red-950/40 text-red-300';
   return (
-    <span className={`inline-flex text-base font-semibold ${tone}`} title={label}>
+    <span
+      className={`inline-flex h-6 w-6 items-center justify-center rounded-md border text-base font-semibold ${tone}`}
+      title={label}
+    >
       {symbol}
     </span>
   );
@@ -829,7 +840,10 @@ function RepeatScoreCell({ group }: { group: RepeatRunGroup }) {
     <div className="flex min-w-0 flex-col items-end gap-1">
       <PassRatePill rate={group.passRate} />
       <div className="text-xs text-gray-500">Attempt success</div>
-      <div className="text-xs tabular-nums text-gray-600">
+      <div
+        className="text-xs tabular-nums text-gray-600"
+        title={`Mean score ${formatPercent(group.meanScore)}`}
+      >
         Mean score {formatPercent(group.meanScore)}
       </div>
     </div>
@@ -1021,11 +1035,13 @@ function ResultDetailPanel({
     <aside
       key={panelScrollKey}
       ref={scrollPanelIntoView}
-      className="min-w-0 max-w-full overflow-hidden rounded-lg border border-gray-800 bg-gray-950/80 xl:sticky xl:top-4 xl:max-h-[calc(100vh-2rem)]"
+      className="min-w-0 max-w-full overflow-hidden rounded-lg border border-cyan-950/70 bg-gray-950/95 ring-1 ring-white/10 xl:sticky xl:top-4 xl:max-h-[calc(100vh-2rem)]"
     >
-      <div className="flex min-w-0 items-start justify-between gap-3 border-b border-gray-800 px-4 py-3">
+      <div className="flex min-w-0 items-start justify-between gap-3 border-b border-gray-800 bg-gray-900/60 px-4 py-3">
         <div className="min-w-0">
-          <p className="text-xs font-medium uppercase tracking-wider text-gray-500">Row detail</p>
+          <p className="text-xs font-medium uppercase tracking-wider text-cyan-500/80">
+            Row detail
+          </p>
           <h4 className="mt-1 truncate text-base font-semibold text-white" title={title}>
             {title}
           </h4>
@@ -1037,14 +1053,14 @@ function ResultDetailPanel({
         <div className="flex shrink-0 items-center gap-2">
           <a
             href={evalDetailHref}
-            className="rounded-md border border-gray-800 px-2.5 py-1.5 text-xs text-gray-400 transition-colors hover:border-gray-700 hover:text-gray-200"
+            className="rounded-md border border-gray-700 bg-gray-950/80 px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:border-cyan-800/70 hover:text-cyan-200"
           >
             Full page
           </a>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-md border border-gray-800 px-2.5 py-1.5 text-xs text-gray-400 transition-colors hover:border-gray-700 hover:text-gray-200"
+            className="rounded-md border border-gray-700 bg-gray-950/80 px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:border-gray-500 hover:text-gray-100"
           >
             Close
           </button>
diff --git a/apps/dashboard/src/components/RunDetail.tsx b/apps/dashboard/src/components/RunDetail.tsx
index 944f7a8cb..b18b52b6e 100644
--- a/apps/dashboard/src/components/RunDetail.tsx
+++ b/apps/dashboard/src/components/RunDetail.tsx
@@ -81,9 +81,9 @@ export function RunDetail({ results, runId, projectId }: RunDetailProps) {
       {/* Category Breakdown */}
       <div>
         <h3 className="mb-3 text-sm font-medium text-gray-400">Category Breakdown</h3>
-        <div className="max-w-full overflow-x-auto rounded-lg border border-gray-800">
+        <div className="max-w-full overflow-x-auto rounded-lg border border-gray-800 bg-gray-950/80 ring-1 ring-white/5">
           <table className="min-w-[620px] w-full whitespace-nowrap text-left text-sm">
-            <thead className="border-b border-gray-800 bg-gray-900/50">
+            <thead className="border-b border-gray-800 bg-gray-900/80">
               <tr>
                 <th className="px-4 py-2.5 font-medium text-gray-400">Category</th>
                 <th className="px-4 py-2.5 font-medium text-gray-400">Pass Rate</th>
@@ -95,11 +95,11 @@ export function RunDetail({ results, runId, projectId }: RunDetailProps) {
                 <th className="px-4 py-2.5 text-right font-medium text-gray-400">Total</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-800/50">
+            <tbody className="divide-y divide-gray-800/70">
               {visibleCategories.map((cat) => {
                 const expanded = expandedCategories[cat.name] === true;
                 return (
-                  <tr key={cat.name} className="transition-colors hover:bg-gray-900/30">
+                  <tr key={cat.name} className="transition-colors hover:bg-gray-900/50">
                     <td className="w-[18rem] max-w-[18rem] px-4 py-2.5 font-medium text-gray-200">
                       <span className="flex min-w-0 items-center gap-2">
                         <span
diff --git a/apps/dashboard/src/components/ScoreBar.tsx b/apps/dashboard/src/components/ScoreBar.tsx
index 2c2358c5c..f80600e2c 100644
--- a/apps/dashboard/src/components/ScoreBar.tsx
+++ b/apps/dashboard/src/components/ScoreBar.tsx
@@ -8,20 +8,31 @@
 interface ScoreBarProps {
   score: number;
   className?: string;
+  showLabel?: boolean;
 }
 
-export function ScoreBar({ score, className = '' }: ScoreBarProps) {
+export function ScoreBar({ score, className = '', showLabel = true }: ScoreBarProps) {
   const pct = Math.round(Math.max(0, Math.min(1, score)) * 100);
+  const tone =
+    pct >= 80
+      ? 'from-cyan-300 via-sky-400 to-blue-500'
+      : pct >= 50
+        ? 'from-amber-300 via-orange-400 to-red-400'
+        : 'from-red-400 via-rose-500 to-fuchsia-500';
 
   return (
     <div className={`flex items-center gap-3 ${className}`}>
-      <div className="h-2 flex-1 overflow-hidden rounded-full bg-gray-800">
+      <div className="h-2 flex-1 overflow-hidden rounded-full bg-gray-800/90 ring-1 ring-white/5">
         <div
-          className="h-full rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 transition-all duration-300"
+          className={`h-full rounded-full bg-gradient-to-r ${tone} transition-all duration-300`}
           style={{ width: `${pct}%` }}
         />
       </div>
-      <span className="w-12 text-right text-sm font-medium tabular-nums text-gray-300">{pct}%</span>
+      {showLabel ? (
+        <span className="w-12 text-right text-sm font-medium tabular-nums text-gray-200">
+          {pct}%
+        </span>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/StatsCards.tsx b/apps/dashboard/src/components/StatsCards.tsx
index 507136a2e..64cff9d5d 100644
--- a/apps/dashboard/src/components/StatsCards.tsx
+++ b/apps/dashboard/src/components/StatsCards.tsx
@@ -23,12 +23,12 @@ export function StatsCards({
   totalCost,
 }: StatsCardsProps) {
   const pct = Math.round(passRate * 100);
-  const rateColor = pct >= 80 ? 'text-cyan-400' : pct >= 60 ? 'text-amber-400' : 'text-red-400';
+  const rateColor = pct >= 80 ? 'text-cyan-300' : pct >= 60 ? 'text-amber-300' : 'text-red-300';
 
   return (
-    <div className="flex flex-wrap items-center gap-6 rounded-lg border border-gray-800 bg-gray-900/60 px-5 py-3">
+    <div className="flex flex-wrap items-center gap-5 rounded-lg border border-cyan-950/70 bg-gray-950/80 px-5 py-3 ring-1 ring-white/5">
       <Stat label="Pass Rate" value={`${pct}%`} accent={rateColor} large />
-      <div className="h-6 w-px bg-gray-700" />
+      <div className="h-8 w-px bg-cyan-900/50" />
       <Stat label="Passed" value={String(passed)} accent="text-emerald-400" />
       <Stat label="Failures" value={String(failed)} accent="text-red-400" />
       {executionErrors > 0 && (
@@ -37,7 +37,7 @@ export function StatsCards({
       <Stat label="Total" value={String(total)} />
       {totalCost !== undefined && (
         <>
-          <div className="h-6 w-px bg-gray-700" />
+          <div className="h-8 w-px bg-cyan-900/50" />
           <Stat label="Cost" value={`$${totalCost.toFixed(4)}`} accent="text-amber-400" />
         </>
       )}
@@ -58,9 +58,9 @@ function Stat({
 }) {
   return (
     <div className="flex flex-col">
-      <span className="text-xs text-gray-500">{label}</span>
+      <span className="text-xs font-medium text-gray-500">{label}</span>
       <span
-        className={`tabular-nums font-semibold ${large ? 'text-2xl' : 'text-lg'} ${accent ?? 'text-white'}`}
+        className={`tabular-nums font-semibold ${large ? 'text-2xl' : 'text-lg'} ${accent ?? 'text-gray-100'}`}
       >
         {value}
       </span>
diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css
index 2fa7a97a4..2fa3d5b2f 100644
--- a/apps/dashboard/src/styles/globals.css
+++ b/apps/dashboard/src/styles/globals.css
@@ -6,10 +6,15 @@
 
 body {
   @apply bg-gray-950 text-gray-100 antialiased;
+  background: linear-gradient(180deg, rgba(8, 13, 28, 0.96) 0%, rgba(3, 7, 18, 1) 42%, #02040a 100%);
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
 }
 
+::selection {
+  @apply bg-cyan-400/25 text-cyan-50;
+}
+
 .av-brand-name {
   font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
   letter-spacing: 0;

From 86e0de6cf84e62b0a7c548ffebef99138a209cef Mon Sep 17 00:00:00 2001
From: Christopher Tso <christso@gmail.com>
Date: Tue, 7 Jul 2026 11:01:57 +0200
Subject: [PATCH 2/2] fix(dashboard): remove mobile eval detail overflow

---
 apps/dashboard/src/components/EvalDetail.tsx  |  2 +-
 .../src/routes/evals/$runId.$evalId.tsx       | 19 +++++++++++--------
 .../$projectId_/evals/$runId.$evalId.tsx      | 19 +++++++++++--------
 apps/dashboard/src/styles/globals.css         |  8 ++++++++
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/apps/dashboard/src/components/EvalDetail.tsx b/apps/dashboard/src/components/EvalDetail.tsx
index ed1066e5b..3957e0f44 100644
--- a/apps/dashboard/src/components/EvalDetail.tsx
+++ b/apps/dashboard/src/components/EvalDetail.tsx
@@ -174,7 +174,7 @@ export function EvalDetail({
     <div className="flex h-full min-h-0 min-w-0 flex-col">
       {/* Tab navigation — at the top so Files tab editor fills maximum height */}
       <div className="min-w-0 border-b border-gray-800">
-        <div className="flex min-w-0 gap-1 overflow-x-auto px-4">
+        <div className="av-scrollbar-none flex min-w-0 gap-1 overflow-x-auto px-4">
           {tabs.map((tab) => (
             <button
               type="button"
diff --git a/apps/dashboard/src/routes/evals/$runId.$evalId.tsx b/apps/dashboard/src/routes/evals/$runId.$evalId.tsx
index 54695dceb..f78179568 100644
--- a/apps/dashboard/src/routes/evals/$runId.$evalId.tsx
+++ b/apps/dashboard/src/routes/evals/$runId.$evalId.tsx
@@ -73,27 +73,30 @@ function EvalDetailPage() {
 
   return (
     <div className="flex h-full flex-col gap-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-gray-400">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
+          <p className="break-words text-sm text-gray-400">
             Run: {runId} / Eval: {result.eval_path ?? evalId}
           </p>
-          <h1 className="flex items-center gap-2 text-2xl font-semibold text-white">
+          <h1 className="mt-1 flex min-w-0 items-start gap-2 break-words text-2xl font-semibold text-white">
             <span
-              className={`text-2xl font-bold leading-none ${passed ? 'text-emerald-400' : 'text-red-400'}`}
+              className={`shrink-0 text-2xl font-bold leading-none ${
+                passed ? 'text-emerald-400' : 'text-red-400'
+              }`}
             >
               {passed ? '✓' : '✗'}
             </span>
-            {evalId}
+            <span className="min-w-0">{evalId}</span>
           </h1>
         </div>
         {!isReadOnly && (
           <button
             type="button"
             onClick={() => setShowRunEval(true)}
-            className="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-500"
+            className="inline-flex shrink-0 items-center gap-1 self-start whitespace-nowrap rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-500"
           >
-            ▶ Run this Test
+            <span aria-hidden="true">▶</span>
+            <span>Run this Test</span>
           </button>
         )}
       </div>
diff --git a/apps/dashboard/src/routes/projects/$projectId_/evals/$runId.$evalId.tsx b/apps/dashboard/src/routes/projects/$projectId_/evals/$runId.$evalId.tsx
index ed1a299bb..3df760957 100644
--- a/apps/dashboard/src/routes/projects/$projectId_/evals/$runId.$evalId.tsx
+++ b/apps/dashboard/src/routes/projects/$projectId_/evals/$runId.$evalId.tsx
@@ -69,27 +69,30 @@ function ProjectEvalDetailPage() {
 
   return (
     <div className="flex h-full flex-col gap-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-gray-400">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
+          <p className="break-words text-sm text-gray-400">
             Run: {runId} / Eval: {result.eval_path ?? evalId}
           </p>
-          <h1 className="flex items-center gap-2 text-2xl font-semibold text-white">
+          <h1 className="mt-1 flex min-w-0 items-start gap-2 break-words text-2xl font-semibold text-white">
             <span
-              className={`text-2xl font-bold leading-none ${passed ? 'text-emerald-400' : 'text-red-400'}`}
+              className={`shrink-0 text-2xl font-bold leading-none ${
+                passed ? 'text-emerald-400' : 'text-red-400'
+              }`}
             >
               {passed ? '✓' : '✗'}
             </span>
-            {evalId}
+            <span className="min-w-0">{evalId}</span>
           </h1>
         </div>
         {!isReadOnly && (
           <button
             type="button"
             onClick={() => setShowRunEval(true)}
-            className="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-500"
+            className="inline-flex shrink-0 items-center gap-1 self-start whitespace-nowrap rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-500"
           >
-            ▶ Run this Test
+            <span aria-hidden="true">▶</span>
+            <span>Run this Test</span>
           </button>
         )}
       </div>
diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css
index 2fa3d5b2f..7d5120b1e 100644
--- a/apps/dashboard/src/styles/globals.css
+++ b/apps/dashboard/src/styles/globals.css
@@ -15,6 +15,14 @@ body {
   @apply bg-cyan-400/25 text-cyan-50;
 }
 
+.av-scrollbar-none {
+  scrollbar-width: none;
+}
+
+.av-scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
 .av-brand-name {
   font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
   letter-spacing: 0;