From c47f0df59f0d7d6db4860314e53b95e8168bfb47 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:47:52 -0700
Subject: [PATCH] fix(dashboard): Evals view fills the pane (was collapsing to
 a ~70px column)

.evals-view root had no sizing, so flexbox shrank it to min-content and the disabled-state text wrapped one word per line. Add width/height:100% + min-0 + overflow to the root, flex:1 body, and a centered full-width empty-state wrapper; the disabled state now also renders the shared ViewHeader (icon+title) like the enabled state.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../dashboard/app/components/EvalsView.css    | 28 +++++++++++++++++++
 .../dashboard/app/components/EvalsView.tsx    | 21 +++++++++-----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/dashboard/app/components/EvalsView.css b/packages/dashboard/app/components/EvalsView.css
index 915dda430e..b315b14b27 100644
--- a/packages/dashboard/app/components/EvalsView.css
+++ b/packages/dashboard/app/components/EvalsView.css
@@ -2,9 +2,18 @@
 FNXC:Navigation 2026-06-22-01:10:
 The shared .view-header sits at the top of the Evals view; the two-column results/detail grid moves into .evals-view__body so the header keeps the standard --space-lg inset while the body retains its side/bottom padding.
 */
+/*
+FNXC:Evals 2026-06-23-04:15:
+Root must fill the main-content pane (full width + height) like InsightsView/ResearchView; previously it was a bare flex column with no sizing, so the column collapsed to min-content (~70px) and the empty-state text wrapped one word per line. `height: 100%; min-width: 0; min-height: 0` makes it occupy the flex/grid host cell; `overflow: hidden` lets the scrollable body own its own scroll.
+*/
 .evals-view {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .evals-view__body {
@@ -12,6 +21,25 @@ The shared .view-header sits at the top of the Evals view; the two-column result
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--space-lg);
   padding: 0 var(--space-lg) var(--space-lg);
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/*
+FNXC:Evals 2026-06-23-04:15:
+Disabled/empty state now centers in the full-width pane beneath the shared ViewHeader instead of rendering as a min-content `card` column. The body fills remaining height and centers its content both axes.
+*/
+.evals-view__empty {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  text-align: center;
 }
 
 .evals-list,
diff --git a/packages/dashboard/app/components/EvalsView.tsx b/packages/dashboard/app/components/EvalsView.tsx
index 833cb2b3d9..ce4043970f 100644
--- a/packages/dashboard/app/components/EvalsView.tsx
+++ b/packages/dashboard/app/components/EvalsView.tsx
@@ -40,13 +40,20 @@ export function EvalsView({ projectId, onOpenSettings, onOpenTaskDetail }: Evals
 
   if (!scheduledEnabled) {
     return (
-      <section className="evals-view card" data-testid="evals-disabled">
-        <h2 className="evals-title">{t("evals.disabledTitle", "Scheduled evals are disabled")}</h2>
-        <p className="evals-empty-copy">{t("evals.enablePrompt", "Enable Scheduled Evals to review scored tasks, evidence, and follow-up recommendations.")}</p>
-        <button className="btn btn-primary" type="button" onClick={() => onOpenSettings?.("scheduled-evals")}>
-          <Settings size={16} />
-          {t("evals.openSettings", "Open Scheduled Evals Settings")}
-        </button>
+      /*
+      FNXC:Evals 2026-06-23-04:15:
+      The disabled state shares the standard ViewHeader (matching InsightsView/ResearchView) and centers its empty-state copy/CTA in the full-width pane. Previously it rendered as a headerless `evals-view card`, which collapsed to a ~70px min-content column and lacked a view header.
+      */
+      <section className="evals-view" data-testid="evals-disabled">
+        <ViewHeader icon={Target} title={t("evals.title", "Evals")} />
+        <div className="evals-view__empty">
+          <h2 className="evals-title">{t("evals.disabledTitle", "Scheduled evals are disabled")}</h2>
+          <p className="evals-empty-copy">{t("evals.enablePrompt", "Enable Scheduled Evals to review scored tasks, evidence, and follow-up recommendations.")}</p>
+          <button className="btn btn-primary" type="button" onClick={() => onOpenSettings?.("scheduled-evals")}>
+            <Settings size={16} />
+            {t("evals.openSettings", "Open Scheduled Evals Settings")}
+          </button>
+        </div>
       </section>
     );
   }