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.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user