tas/Codewalkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Eliminate whitespace above sticky review header

Browse Source 
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:
Lukas May
2026-03-06 11:17:29 +01:00
parent 6cf6bd076f
commit 01f2279735
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/components/review/ReviewTab.tsx
View File

@@ -25,9 +25,9 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
const el = headerRef.current; const el = headerRef.current;
if (!el) return; if (!el) return;
const ro = new ResizeObserver(([entry]) => { 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(); return () => ro.disconnect();
}, []); }, []);
@@ -323,9 +323,9 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
} }
return ( return (
<div className="rounded-lg border border-border bg-card"> <div>
{/* Header: phase selector + toolbar */} {/* 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 <ReviewHeader
phases={reviewablePhases.map((p) => ({ id: p.id, name: p.name, status: p.status }))} phases={reviewablePhases.map((p) => ({ id: p.id, name: p.name, status: p.status }))}
activePhaseId={activePhaseId} activePhaseId={activePhaseId}
@@ -347,7 +347,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
</div> </div>
{/* Main content area — sidebar always rendered to preserve state */} {/* 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 */} {/* Left: Sidebar — sticky to viewport, scrolls independently */}
<div className="border-r border-border"> <div className="border-r border-border">
<div <div