elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Render maximized photo overlay via React Portal to resolve CSS stacking context issue

Browse Source
This commit is contained in:
elpatron
2026-06-06 21:33:47 +02:00
parent f321e5bbd1
commit 65d2215a35
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/PhotoCapture.tsx
+4 -2
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from 'react' import React, { useState, useEffect, useRef } from 'react'
import { createPortal } from 'react-dom'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { db } from '../services/db.js' import { db } from '../services/db.js'
import { getActiveMasterKey } from '../services/auth.js' import { getActiveMasterKey } from '../services/auth.js'
@@ -294,7 +295,7 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
</div> </div>
)} )}
{maximizedPhoto && ( {maximizedPhoto && createPortal(
<div <div
className="photo-maximized-overlay" className="photo-maximized-overlay"
onClick={() => setMaximizedPhoto(null)} onClick={() => setMaximizedPhoto(null)}
@@ -319,7 +320,8 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
</div> </div>
)} )}
</div> </div>
</div> </div>,
document.body
)} )}
</div> </div>
) )