From 09624e9cb7a3f4490be6f47f2e81634a9696d128 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 11:15:02 +0100
Subject: [PATCH] fix: Sidebar accounts for sticky header height via
 ResizeObserver

Measures the review header dynamically and offsets the sidebar's sticky
top and max-height accordingly, eliminating the gap when scrolled.
---
 apps/web/src/components/review/ReviewTab.tsx | 24 ++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

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<string | null>(null);
   const [viewedFiles, setViewedFiles] = useState<Set<string>>(new Set());
   const fileRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const headerRef = useRef<HTMLDivElement>(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 (
     <div className="rounded-lg border border-border bg-card">
       {/* Header: phase selector + toolbar */}
+      <div ref={headerRef}>
       <ReviewHeader
         phases={reviewablePhases.map((p) => ({ 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}
       />
+      </div>
 
       {/* Main content area — sidebar always rendered to preserve state */}
       <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 className="sticky top-0 h-screen max-h-[calc(100vh-4rem)] overflow-hidden">
+          <div
+            className="sticky overflow-hidden"
+            style={{
+              top: `${headerHeight}px`,
+              maxHeight: `calc(100vh - ${headerHeight}px)`,
+            }}
+          >
             <ReviewSidebar
               files={allFiles}
               comments={comments}