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

fix: Merge confirmation dropdown hidden behind sticky file headers

Browse Source 
Remove overflow-hidden from ReviewTab outer wrapper (was clipping the
absolutely-positioned dropdown), make ReviewHeader sticky with z-20 to
sit above file headers (z-10), and bump the dropdown to z-30.
This commit is contained in:
Lukas May
2026-03-05 20:59:30 +01:00
parent 3c99bdeeb5
commit a3ee581629
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,7 +93,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"> <div className="border-b border-border bg-card/80 backdrop-blur-sm sticky top-0 z-20">
{/* 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">
@@ -223,7 +223,7 @@ export function ReviewHeader({
{/* Merge confirmation dropdown */} {/* Merge confirmation dropdown */}
{showConfirmation && ( {showConfirmation && (
<div className="absolute right-0 top-full mt-1 z-20 w-64 rounded-lg border border-border bg-card shadow-lg p-4"> <div className="absolute right-0 top-full mt-1 z-30 w-64 rounded-lg border border-border bg-card shadow-lg p-4">
<p className="text-sm font-semibold mb-3"> <p className="text-sm font-semibold mb-3">
Ready to merge? Ready to merge?
</p> </p>

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

@@ -295,7 +295,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
}, [diffQuery.data?.rawDiff]); }, [diffQuery.data?.rawDiff]);
return ( return (
<div className="rounded-lg border border-border overflow-hidden bg-card"> <div className="rounded-lg border border-border bg-card">
{/* Header: phase selector + toolbar */} {/* Header: phase selector + toolbar */}
<ReviewHeader <ReviewHeader
phases={pendingReviewPhases.map((p) => ({ id: p.id, name: p.name }))} phases={pendingReviewPhases.map((p) => ({ id: p.id, name: p.name }))}
@@ -316,7 +316,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
/> />
{/* 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]"> <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] overflow-hidden rounded-b-lg">
{/* Left: Sidebar — sticky so icon strip stays visible */} {/* Left: Sidebar — sticky so icon strip stays visible */}
<div className="border-r border-border"> <div className="border-r border-border">
<div className="sticky top-0 h-[calc(100vh-12rem)]"> <div className="sticky top-0 h-[calc(100vh-12rem)]">