From 01f22797359142cec6837a0988fc3a55036153c4 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 11:17:29 +0100
Subject: [PATCH] fix: Eliminate whitespace above sticky review header

Moved card border/rounding onto the sticky header wrapper itself so it
scrolls flush to top-0 with no gap. The body grid gets its own border-x
and border-b to preserve the card appearance. ResizeObserver now measures
border-box size for accurate sidebar offset.
---
 apps/web/src/components/review/ReviewTab.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx
index a532253..09bdd7e 100644
--- a/apps/web/src/components/review/ReviewTab.tsx
+++ b/apps/web/src/components/review/ReviewTab.tsx
@@ -25,9 +25,9 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
     const el = headerRef.current;
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
-      setHeaderHeight(entry.contentRect.height);
+      setHeaderHeight(entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height);
     });
-    ro.observe(el);
+    ro.observe(el, { box: 'border-box' });
     return () => ro.disconnect();
   }, []);
 
@@ -323,9 +323,9 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
   }
 
   return (
-    <div className="rounded-lg border border-border bg-card">
+    <div>
       {/* Header: phase selector + toolbar */}
-      <div ref={headerRef} className="sticky top-0 z-20">
+      <div ref={headerRef} className="sticky top-0 z-20 rounded-t-lg border border-border bg-card">
       <ReviewHeader
         phases={reviewablePhases.map((p) => ({ id: p.id, name: p.name, status: p.status }))}
         activePhaseId={activePhaseId}
@@ -347,7 +347,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
       </div>
 
       {/* Main content area — sidebar always rendered to preserve state */}
-      <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] rounded-b-lg">
+      <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] rounded-b-lg border-x border-b border-border bg-card">
         {/* Left: Sidebar — sticky to viewport, scrolls independently */}
         <div className="border-r border-border">
           <div