From 5b497b84a04ece7d4e9386f739157a8feecc8940 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 11:26:43 +0100
Subject: [PATCH] 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.
---
 apps/web/src/components/review/ReviewHeader.tsx | 4 +++-
 apps/web/src/components/review/ReviewTab.tsx    | 9 +++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/review/ReviewHeader.tsx b/apps/web/src/components/review/ReviewHeader.tsx
index d0b19d3..44e55fc 100644
--- a/apps/web/src/components/review/ReviewHeader.tsx
+++ b/apps/web/src/components/review/ReviewHeader.tsx
@@ -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">
diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx
index b44a1ef..4c4fa13 100644
--- a/apps/web/src/components/review/ReviewTab.tsx
+++ b/apps/web/src/components/review/ReviewTab.tsx
@@ -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