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:
Lukas May
2026-03-06 11:26:43 +01:00
parent 4664644cda
commit 5b497b84a0
2 changed files with 6 additions and 7 deletions

View File

@@ -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">

View File

@@ -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