fix: Merge confirmation dropdown hidden behind sticky file headers
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:
@@ -93,7 +93,7 @@ export function ReviewHeader({
|
||||
const total = totalCount ?? 0;
|
||||
|
||||
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 */}
|
||||
{phases.length > 1 && (
|
||||
<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 */}
|
||||
{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">
|
||||
Ready to merge?
|
||||
</p>
|
||||
|
||||
@@ -295,7 +295,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
|
||||
}, [diffQuery.data?.rawDiff]);
|
||||
|
||||
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 */}
|
||||
<ReviewHeader
|
||||
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 */}
|
||||
<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 */}
|
||||
<div className="border-r border-border">
|
||||
<div className="sticky top-0 h-[calc(100vh-12rem)]">
|
||||
|
||||
Reference in New Issue
Block a user