From 65d2215a35c49108f1e03403c121eb14c4a64567 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sat, 6 Jun 2026 21:33:47 +0200
Subject: [PATCH] Render maximized photo overlay via React Portal to resolve
 CSS stacking context issue

---
 client/src/components/PhotoCapture.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/PhotoCapture.tsx b/client/src/components/PhotoCapture.tsx
index db573e1..efd802b 100644
--- a/client/src/components/PhotoCapture.tsx
+++ b/client/src/components/PhotoCapture.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
@@ -294,7 +295,7 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
         </div>
       )}
 
-      {maximizedPhoto && (
+      {maximizedPhoto && createPortal(
         <div
           className="photo-maximized-overlay"
           onClick={() => setMaximizedPhoto(null)}
@@ -319,7 +320,8 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
               </div>
             )}
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   )