scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-10 03:30:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(web): Enabling scroll in the Stages sidebar on the run overview/stages tabs (#541)

Browse source 
This change enables scrolling the stages sidebar on the run's
overview/stages page. Without it, for long runs with lots of stages, the
entire page scrolls, hiding the graph while it's running.


https://github.com/user-attachments/assets/c5405a5b-8480-46f8-8d7c-4cd4914f6228

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
André Mazoni 2026-07-02 23:33:17 +09:30 • committed by GitHub
parent 0e30ae30ba
commit 91bd115d53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/fabro-web/app/routes/run-overview.tsx
View file

@ -20,7 +20,7 @@ import {
type RunGraphNodeHover,
} from "../hooks/use-annotated-run-graph-svg";
export const handle = { wide: true };
export const handle = { wide: true, fullHeight: true };
type Direction = "LR" | "TB";
@ -113,15 +113,19 @@ export default function RunOverview() {
}, []);
return (
<div className="flex gap-6">
<StageSidebar stages={stages} runId={id!} />
<div className="flex min-h-0 flex-1 gap-6">
<div className="min-h-0 shrink-0 overflow-y-auto overflow-x-hidden pb-[var(--fabro-interview-dock-clearance,0px)]">
<StageSidebar stages={stages} runId={id!} />
</div>
<div className="min-w-0 flex-1 space-y-4">
<RunSummaryPanel runId={id!} />
<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 pb-[var(--fabro-interview-dock-clearance,0px)]">
<div className="shrink-0">
<RunSummaryPanel runId={id!} />
</div>
{graphSvg === undefined && graphQuery.isLoading ? (
<div className="py-12" />
<div className="flex-1" />
) : graphSvg ? (
<div className="graph-svg relative rounded-md border border-line bg-panel-alt">
<div className="graph-svg relative flex min-h-0 flex-1 flex-col rounded-md border border-line bg-panel-alt">
<GraphToolbar
direction={direction}
setDirection={setDirection}
@ -132,7 +136,7 @@ export default function RunOverview() {
<div
ref={containerRef}
className="overflow-hidden p-6"
className="min-h-0 flex-1 overflow-hidden p-6"
style={{ cursor: dragState.current ? "grabbing" : "grab" }}
onPointerDown={onPointerDown}
onPointerMove={onPointerMove}
@ -141,7 +145,7 @@ export default function RunOverview() {
>
<div
ref={innerRef}
className="flex items-center justify-center [&_svg]:mx-auto [&_svg]:block"
className="flex h-full items-center justify-center [&_svg]:mx-auto [&_svg]:block"
style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100})`, transformOrigin: "center center" }}
/>
</div>

4
apps/fabro-web/app/routes/run-stages.tsx
View file

@ -1920,7 +1920,7 @@ export default function RunStages() {
return (
<div className="-mr-4 -mt-3 flex min-h-0 flex-1 sm:-mr-6 lg:-mr-8">
<div className="shrink-0 pb-6 pr-3 pt-3">
<div className="min-h-0 shrink-0 overflow-y-auto overflow-x-hidden pr-3 pt-3 pb-[calc(1.5rem+var(--fabro-interview-dock-clearance,0px))]">
<StageSidebar stages={stages} runId={id} selectedStageId={selectedStage.id} />
</div>
@ -1933,7 +1933,7 @@ export default function RunStages() {
{isAgentStage && (
<>
<div className="shrink-0 px-3 pb-6 pt-3">
<div className="min-h-0 shrink-0 overflow-y-auto overflow-x-hidden px-3 pt-3 pb-[calc(1.5rem+var(--fabro-interview-dock-clearance,0px))]">
<StageInsightsSidebar
stage={stageProjection}
contextWindow={contextWindowQuery.data}