feat(web): hide steer bar on the Children sub-tab

The Children tab's bulk action toolbar sits at the bottom of the page,
where the SteerBar was overlapping it. Add a `hideSteerBar` flag to the
Children route handle and skip rendering the fixed bottom bar in
run-detail when set. Keep the InterviewDock visible when there are
pending questions so urgent prompts aren't swallowed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-05-25 12:51:41 -04:00
parent 4dfcbc0e03
commit fa44035a24
No known key found for this signature in database
2 changed files with 23 additions and 16 deletions

View file

@ -28,7 +28,7 @@ import { ApiError } from "../lib/api-client";
import { formatRelativeTime } from "../lib/format";
import { useRun, useRunsPage } from "../lib/queries";
export const handle = { wide: true };
export const handle = { wide: true, hideSteerBar: true };
export default function RunChildren() {
const { id } = useParams();

View file

@ -445,6 +445,9 @@ export default function RunDetail({ params }: { params: { id: string } }) {
const fullHeight = matches.some(
(m) => (m.handle as { fullHeight?: boolean } | undefined)?.fullHeight,
);
const hideSteerBar = matches.some(
(m) => (m.handle as { hideSteerBar?: boolean } | undefined)?.hideSteerBar,
);
useRunEvents(params.id);
useRunToasts(params.id);
@ -818,26 +821,30 @@ export default function RunDetail({ params }: { params: { id: string } }) {
className={
fullHeight
? "pt-3 flex min-h-0 flex-1 flex-col"
: "pt-3 pb-[var(--fabro-interview-dock-clearance)]"
: hideSteerBar && !hasPendingQuestions
? "pt-3"
: "pt-3 pb-[var(--fabro-interview-dock-clearance)]"
}
>
<Outlet />
</div>
<div
className={`fixed bottom-0 left-0 z-30 border-t border-line bg-page ${
isResizing
? ""
: "transition-[right] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]"
}`}
style={{ right: sidebarWidth }}
>
{hasPendingQuestions ? (
<InterviewDock runId={params.id} questions={pendingQuestions} />
) : (
<SteerBar ref={steerBarRef} runId={params.id} />
)}
</div>
{(!hideSteerBar || hasPendingQuestions) && (
<div
className={`fixed bottom-0 left-0 z-30 border-t border-line bg-page ${
isResizing
? ""
: "transition-[right] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]"
}`}
style={{ right: sidebarWidth }}
>
{hasPendingQuestions ? (
<InterviewDock runId={params.id} questions={pendingQuestions} />
) : (
<SteerBar ref={steerBarRef} runId={params.id} />
)}
</div>
)}
{askAvailable && (
// Docked below the top nav (h-16) and above the steer bar (z-30); the