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

fix: Restore sticky header and sidebar by simplifying layout

Browse Source 
Removed wrapper divs that broke sticky positioning. ReviewHeader now
accepts a ref prop directly, with sticky top-0 on its own root element.
Card wrapper restored as the tall containing block so both header and
sidebar have room to stick within it.
This commit is contained in:
Lukas May
2026-03-06 11:26:43 +01:00
parent 4664644cda
commit 5b497b84a0
2 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/review/ReviewHeader.tsx
View File

@@ -25,6 +25,7 @@ interface PhaseOption {
} }
interface ReviewHeaderProps { interface ReviewHeaderProps {
ref?: React.Ref<HTMLDivElement>;
phases: PhaseOption[]; phases: PhaseOption[];
activePhaseId: string | null; activePhaseId: string | null;
isReadOnly?: boolean; isReadOnly?: boolean;
@@ -44,6 +45,7 @@ interface ReviewHeaderProps {
} }
export function ReviewHeader({ export function ReviewHeader({
ref,
phases, phases,
activePhaseId, activePhaseId,
isReadOnly, isReadOnly,
@@ -95,7 +97,7 @@ export function ReviewHeader({
const total = totalCount ?? 0; const total = totalCount ?? 0;
return ( return (
<div className="border-b border-border bg-card/80 backdrop-blur-sm sticky top-0 z-20"> <div ref={ref} className="border-b border-border bg-card backdrop-blur-sm sticky top-0 z-20 rounded-t-lg">
{/* Phase selector row */} {/* Phase selector row */}
{phases.length > 1 && ( {phases.length > 1 && (
<div className="flex items-center gap-1 px-4 pt-3 pb-2 border-b border-border/50"> <div className="flex items-center gap-1 px-4 pt-3 pb-2 border-b border-border/50">

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

@@ -323,11 +323,10 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
} }
return ( return (
<div> <div className="rounded-lg border border-border bg-card">
{/* Header: phase selector + toolbar */} {/* Header: phase selector + toolbar */}
<div ref={headerRef} className="sticky top-0 z-20 before:absolute before:inset-x-0 before:bottom-full before:h-24 before:bg-background">
<div className="rounded-t-lg border border-border bg-card">
<ReviewHeader <ReviewHeader
ref={headerRef}
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}
isReadOnly={isActivePhaseCompleted} isReadOnly={isActivePhaseCompleted}
@@ -345,11 +344,9 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
viewedCount={viewedFiles.size} viewedCount={viewedFiles.size}
totalCount={allFiles.length} totalCount={allFiles.length}
/> />
</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 border-x border-b border-border bg-card"> <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] rounded-b-lg">
{/* 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