From a3ee58162981ffd2030d2b8ac2ecd29b75a0b4ba Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Thu, 5 Mar 2026 20:59:30 +0100
Subject: [PATCH] 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.
---
 apps/web/src/components/review/ReviewHeader.tsx | 4 ++--
 apps/web/src/components/review/ReviewTab.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/review/ReviewHeader.tsx b/apps/web/src/components/review/ReviewHeader.tsx
index 0e069ff..7aed391 100644
--- a/apps/web/src/components/review/ReviewHeader.tsx
+++ b/apps/web/src/components/review/ReviewHeader.tsx
@@ -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>
diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx
index 9945224..ac6c4a1 100644
--- a/apps/web/src/components/review/ReviewTab.tsx
+++ b/apps/web/src/components/review/ReviewTab.tsx
@@ -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)]">