diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx index ec78480..91c7c4e 100644 --- a/apps/web/src/components/review/ReviewTab.tsx +++ b/apps/web/src/components/review/ReviewTab.tsx @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useRef, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { toast } from "sonner"; import { Loader2 } from "lucide-react"; import { trpc } from "@/lib/trpc"; @@ -18,6 +18,18 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) { const [selectedCommit, setSelectedCommit] = useState(null); const [viewedFiles, setViewedFiles] = useState>(new Set()); const fileRefs = useRef>(new Map()); + const headerRef = useRef(null); + const [headerHeight, setHeaderHeight] = useState(0); + + useEffect(() => { + const el = headerRef.current; + if (!el) return; + const ro = new ResizeObserver(([entry]) => { + setHeaderHeight(entry.contentRect.height); + }); + ro.observe(el); + return () => ro.disconnect(); + }, []); const toggleViewed = useCallback((filePath: string) => { setViewedFiles(prev => { @@ -313,6 +325,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) { return (
{/* Header: phase selector + toolbar */} +
({ id: p.id, name: p.name, status: p.status }))} activePhaseId={activePhaseId} @@ -331,12 +344,19 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) { viewedCount={viewedFiles.size} totalCount={allFiles.length} /> +
{/* Main content area — sidebar always rendered to preserve state */}
{/* Left: Sidebar — sticky to viewport, scrolls independently */}
-
+