From db502b462c24a638d0824e531163a1bc02f09723 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Fri, 3 Apr 2026 21:52:05 -0500
Subject: [PATCH] Fix lightbox appearing behind right sidebar by portaling to
 document.body

---
 src/components/ImageGallery.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageGallery.tsx b/src/components/ImageGallery.tsx
index e5ba94ad..ee341831 100644
--- a/src/components/ImageGallery.tsx
+++ b/src/components/ImageGallery.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronLeft, ChevronRight, X, Download } from 'lucide-react';
 import { Blurhash } from 'react-blurhash';
 import { cn } from '@/lib/utils';
@@ -125,8 +126,8 @@ export function ImageGallery({
         ))}
       </div>
 
-      {/* Lightbox */}
-      {lightboxIndex !== null && lightboxIndex !== undefined && (
+      {/* Lightbox — portaled to document.body to escape stacking contexts (e.g. the center column z-0) */}
+      {lightboxIndex !== null && lightboxIndex !== undefined && createPortal(
         <Lightbox
           images={images}
           currentIndex={lightboxIndex}
@@ -135,7 +136,8 @@ export function ImageGallery({
           onPrev={goPrev}
           topBarLeft={lightboxTopBarLeft}
           bottomBar={lightboxBottomBar}
-        />
+        />,
+        document.body,
       )}
     </>
   );