root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(dashboard): Evals view fills the pane (was collapsing to a ~70px column)

Browse Source 
.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>
This commit is contained in:
gsxdsm
2026-06-22 11:47:52 -07:00
parent 94c4a78615
commit c47f0df59f
2 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/dashboard/app/components/EvalsView.css
View File

@@ -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,

21
packages/dashboard/app/components/EvalsView.tsx
View File

@@ -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>
);
}