From f428ec027e57c1800427e41538f539669e118cda Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 11:36:28 +0100
Subject: [PATCH] fix: Sticky file headers sit below review header using CSS
 variable

Sets --review-header-h on the card wrapper from measured header height.
FileCard reads it for sticky top offset so file headers dock just below
the review header instead of overlapping it.
---
 apps/web/src/components/review/FileCard.tsx  | 3 ++-
 apps/web/src/components/review/ReviewTab.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/review/FileCard.tsx b/apps/web/src/components/review/FileCard.tsx
index 5606de4..16100db 100644
--- a/apps/web/src/components/review/FileCard.tsx
+++ b/apps/web/src/components/review/FileCard.tsx
@@ -82,7 +82,8 @@ export function FileCard({
     <div className="rounded-lg border border-border overflow-hidden">
       {/* File header — sticky so it stays visible when scrolling */}
       <button
-        className={`sticky top-0 z-10 flex w-full items-center gap-2 px-3 py-2 bg-muted hover:bg-muted/90 text-left text-sm font-mono transition-colors ${leftBorderClass[file.changeType]}`}
+        className={`sticky z-10 flex w-full items-center gap-2 px-3 py-2 bg-muted hover:bg-muted/90 text-left text-sm font-mono transition-colors ${leftBorderClass[file.changeType]}`}
+        style={{ top: 'var(--review-header-h, 0px)' }}
         onClick={() => setExpanded(!expanded)}
       >
         {expanded ? (
diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx
index 4c4fa13..0ce2079 100644
--- a/apps/web/src/components/review/ReviewTab.tsx
+++ b/apps/web/src/components/review/ReviewTab.tsx
@@ -323,7 +323,10 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
   }
 
   return (
-    <div className="rounded-lg border border-border bg-card">
+    <div
+      className="rounded-lg border border-border bg-card"
+      style={{ '--review-header-h': `${headerHeight}px` } as React.CSSProperties}
+    >
       {/* Header: phase selector + toolbar */}
       <ReviewHeader
         ref={headerRef}