Update lightbox-image.tsx

Author: mythz

app/(home)/lightbox-image.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import Image from 'next/image';
 import { X } from 'lucide-react';
 
@@ -15,6 +16,23 @@ interface LightboxImageProps {
 export function LightboxImage({ src, alt, width, height, className }: LightboxImageProps) {
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const previousOverflow = document.body.style.overflow;
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsOpen(false);
+    };
+
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', closeOnEscape);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [isOpen]);
+
   return (
     <>
       {/* Thumbnail */}
@@ -31,11 +49,14 @@ export function LightboxImage({ src, alt, width, height, className }: LightboxIm
         />
       </div>
 
-      {/* Lightbox Modal */}
-      {isOpen && (
+      {/* Render outside animated/overflow-hidden thumbnail cards so fixed positioning is viewport-relative. */}
+      {isOpen && createPortal(
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 p-4"
           onClick={() => setIsOpen(false)}
+          role="dialog"
+          aria-modal="true"
+          aria-label={`${alt} preview`}
         >
           <button
             className="absolute top-4 right-4 p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
@@ -54,7 +75,8 @@ export function LightboxImage({ src, alt, width, height, className }: LightboxIm
               onClick={(e) => e.stopPropagation()}
             />
           </div>
-        </div>
+        </div>,
+        document.body,
       )}
     </>
   );