From 06277c79f5cb83bc80beeb84f41a02fc0603e7fc Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 9 May 2026 19:33:13 -0400
Subject: [PATCH] fix(web): balance top and bottom padding in stage renderer
 area
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The outer scroll container had pt-2 with pb-[calc(1.5rem+dock)], so
content sat ~8px below the tab toolbar but ~24px above the dock —
visibly off. Each new renderer also re-applied its own pt-2, doubling
the top spacing. Bump the outer pt to pt-6 so it matches the 24px
baseline bottom, and drop the duplicated pt-2 from every renderer
wrapper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/components/stage-renderers/conditional-decision.tsx     | 2 +-
 .../fabro-web/app/components/stage-renderers/fan-in-results.tsx | 2 +-
 apps/fabro-web/app/components/stage-renderers/human-qa.tsx      | 2 +-
 .../app/components/stage-renderers/manager-loop-summary.tsx     | 2 +-
 .../app/components/stage-renderers/parallel-children.tsx        | 2 +-
 apps/fabro-web/app/components/stage-renderers/stage-summary.tsx | 2 +-
 apps/fabro-web/app/components/stage-renderers/wait-status.tsx   | 2 +-
 apps/fabro-web/app/routes/run-stages.tsx                        | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/fabro-web/app/components/stage-renderers/conditional-decision.tsx b/apps/fabro-web/app/components/stage-renderers/conditional-decision.tsx
index 748f46853..67036a446 100644
--- a/apps/fabro-web/app/components/stage-renderers/conditional-decision.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/conditional-decision.tsx
@@ -47,7 +47,7 @@ export function ConditionalDecision({
   }, [allStages, edge]);
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar stage={stage} />
 
       <section className="rounded-lg bg-panel p-6 outline-1 -outline-offset-1 outline-line">
diff --git a/apps/fabro-web/app/components/stage-renderers/fan-in-results.tsx b/apps/fabro-web/app/components/stage-renderers/fan-in-results.tsx
index a7d4b7f5c..5ad179b56 100644
--- a/apps/fabro-web/app/components/stage-renderers/fan-in-results.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/fan-in-results.tsx
@@ -99,7 +99,7 @@ export function FanInResults({
   );
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar
         stage={stage}
         trailing={
diff --git a/apps/fabro-web/app/components/stage-renderers/human-qa.tsx b/apps/fabro-web/app/components/stage-renderers/human-qa.tsx
index c8221b7bf..44c7c041f 100644
--- a/apps/fabro-web/app/components/stage-renderers/human-qa.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/human-qa.tsx
@@ -223,7 +223,7 @@ export function HumanQA({
   const pendingCount = pairs.filter((p) => p.resolution == null).length;
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar
         stage={stage}
         trailing={
diff --git a/apps/fabro-web/app/components/stage-renderers/manager-loop-summary.tsx b/apps/fabro-web/app/components/stage-renderers/manager-loop-summary.tsx
index 08068dad8..9677dcdd4 100644
--- a/apps/fabro-web/app/components/stage-renderers/manager-loop-summary.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/manager-loop-summary.tsx
@@ -21,7 +21,7 @@ export function ManagerLoopSummary({
   const cycleHint = notes ?? null;
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar stage={stage} />
 
       <section className="rounded-lg bg-panel p-5 outline-1 -outline-offset-1 outline-line">
diff --git a/apps/fabro-web/app/components/stage-renderers/parallel-children.tsx b/apps/fabro-web/app/components/stage-renderers/parallel-children.tsx
index cbe4e15f6..57c6c04a3 100644
--- a/apps/fabro-web/app/components/stage-renderers/parallel-children.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/parallel-children.tsx
@@ -146,7 +146,7 @@ export function ParallelChildren({
       : [];
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar
         stage={stage}
         trailing={
diff --git a/apps/fabro-web/app/components/stage-renderers/stage-summary.tsx b/apps/fabro-web/app/components/stage-renderers/stage-summary.tsx
index 164f62798..87e9946a9 100644
--- a/apps/fabro-web/app/components/stage-renderers/stage-summary.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/stage-summary.tsx
@@ -36,7 +36,7 @@ export function StageSummary({
   const categories = summarizeEventCategories(events);
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar stage={stage} />
 
       <dl className="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2 text-sm">
diff --git a/apps/fabro-web/app/components/stage-renderers/wait-status.tsx b/apps/fabro-web/app/components/stage-renderers/wait-status.tsx
index d806a03da..3e8dc61c1 100644
--- a/apps/fabro-web/app/components/stage-renderers/wait-status.tsx
+++ b/apps/fabro-web/app/components/stage-renderers/wait-status.tsx
@@ -24,7 +24,7 @@ export function WaitStatus({ stage }: { stage: Stage }) {
   const label = isActive ? "Waiting" : "Wait complete";
 
   return (
-    <div className="space-y-6 pl-3 pr-4 pt-2 sm:pr-6 lg:pr-8">
+    <div className="space-y-6 pl-3 pr-4 sm:pr-6 lg:pr-8">
       <StageMetaBar stage={stage} />
 
       <section className="flex items-center justify-center rounded-lg bg-panel py-12 outline-1 -outline-offset-1 outline-line">
diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index 5d52547cf..1f0388416 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -1298,7 +1298,7 @@ export default function RunStages() {
             )}
           </div>
         </div>
-        <div className="min-h-0 flex-1 overflow-y-auto pt-2 pb-[calc(1.5rem+var(--fabro-interview-dock-clearance,0px))]">
+        <div className="min-h-0 flex-1 overflow-y-auto pt-6 pb-[calc(1.5rem+var(--fabro-interview-dock-clearance,0px))]">
           {effectiveTab === "primary" ? (
             renderer === "agent" ? (
               turns.length > 0 && filteredTurns.length === 0 ? (