fix: Restore sticky header and sidebar by simplifying layout
Removed wrapper divs that broke sticky positioning. ReviewHeader now accepts a ref prop directly, with sticky top-0 on its own root element. Card wrapper restored as the tall containing block so both header and sidebar have room to stick within it.
This commit is contained in:
@@ -25,6 +25,7 @@ interface PhaseOption {
|
||||
}
|
||||
|
||||
interface ReviewHeaderProps {
|
||||
ref?: React.Ref<HTMLDivElement>;
|
||||
phases: PhaseOption[];
|
||||
activePhaseId: string | null;
|
||||
isReadOnly?: boolean;
|
||||
@@ -44,6 +45,7 @@ interface ReviewHeaderProps {
|
||||
}
|
||||
|
||||
export function ReviewHeader({
|
||||
ref,
|
||||
phases,
|
||||
activePhaseId,
|
||||
isReadOnly,
|
||||
@@ -95,7 +97,7 @@ export function ReviewHeader({
|
||||
const total = totalCount ?? 0;
|
||||
|
||||
return (
|
||||
<div className="border-b border-border bg-card/80 backdrop-blur-sm sticky top-0 z-20">
|
||||
<div ref={ref} className="border-b border-border bg-card backdrop-blur-sm sticky top-0 z-20 rounded-t-lg">
|
||||
{/* Phase selector row */}
|
||||
{phases.length > 1 && (
|
||||
<div className="flex items-center gap-1 px-4 pt-3 pb-2 border-b border-border/50">
|
||||
|
||||
@@ -323,11 +323,10 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="rounded-lg border border-border bg-card">
|
||||
{/* Header: phase selector + toolbar */}
|
||||
<div ref={headerRef} className="sticky top-0 z-20 before:absolute before:inset-x-0 before:bottom-full before:h-24 before:bg-background">
|
||||
<div className="rounded-t-lg border border-border bg-card">
|
||||
<ReviewHeader
|
||||
ref={headerRef}
|
||||
phases={reviewablePhases.map((p) => ({ id: p.id, name: p.name, status: p.status }))}
|
||||
activePhaseId={activePhaseId}
|
||||
isReadOnly={isActivePhaseCompleted}
|
||||
@@ -345,11 +344,9 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
|
||||
viewedCount={viewedFiles.size}
|
||||
totalCount={allFiles.length}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content area — sidebar always rendered to preserve state */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] rounded-b-lg border-x border-b border-border bg-card">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] rounded-b-lg">
|
||||
{/* Left: Sidebar — sticky to viewport, scrolls independently */}
|
||||
<div className="border-r border-border">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user