From 1e6027f438aa658156d9729ae2195b15f6d41db2 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Sat, 20 Dec 2025 19:19:07 +0100
Subject: [PATCH] =?UTF-8?q?bessere=20sichtbarkeit=20f=C3=BCr=20die=20kamer?=
 =?UTF-8?q?a-buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/guest/pages/UploadPage.tsx | 33 ++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/resources/js/guest/pages/UploadPage.tsx b/resources/js/guest/pages/UploadPage.tsx
index e71b03c..bd95f37 100644
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -200,6 +200,29 @@ const [canUpload, setCanUpload] = useState(true);
     };
   }, []);
 
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const root = document.documentElement;
+    const updateViewportVar = () => {
+      const viewport = window.visualViewport?.height ?? window.innerHeight;
+      root.style.setProperty('--guest-viewport-height', `${viewport}px`);
+    };
+
+    updateViewportVar();
+    window.visualViewport?.addEventListener('resize', updateViewportVar);
+    window.visualViewport?.addEventListener('scroll', updateViewportVar);
+    window.addEventListener('resize', updateViewportVar);
+
+    return () => {
+      window.visualViewport?.removeEventListener('resize', updateViewportVar);
+      window.visualViewport?.removeEventListener('scroll', updateViewportVar);
+      window.removeEventListener('resize', updateViewportVar);
+    };
+  }, []);
+
   const updateNavVisibility = useCallback(() => {
     if (typeof document === 'undefined') {
       return;
@@ -1194,6 +1217,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
   const countdownDegrees = Math.round(countdownProgress * 360);
   const controlIconButtonBase =
     'flex h-10 w-10 items-center justify-center rounded-full border border-white/25 bg-white/10 text-white shadow-sm backdrop-blur transition hover:border-white/40 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60';
+  const cameraControlsInset = 'calc(env(safe-area-inset-bottom, 0px) + 72px)';
 
   return renderWithDialog(
     <>
@@ -1218,7 +1242,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
           ref={cameraViewportRef}
           className="relative w-full"
           style={{
-            height: 'clamp(60vh, calc(100vh - 220px), 82vh)',
+            height: `clamp(60vh, calc(var(--guest-viewport-height, 100dvh) - 220px - ${cameraControlsInset}), 82vh)`,
             minHeight: '60vh',
             maxHeight: '88vh',
           }}
@@ -1277,8 +1301,11 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
               </div>
             )}
 
-            <div className="pointer-events-none absolute inset-x-0 bottom-4 z-30 flex justify-center">
-              <div className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/20 bg-black/40 px-3 py-2 backdrop-blur">
+            <div className="pointer-events-none absolute inset-x-0 bottom-2 z-30 flex justify-center">
+              <div
+                className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/20 bg-black/40 px-3 py-2 backdrop-blur"
+                style={{ marginBottom: 'env(safe-area-inset-bottom, 0px)' }}
+              >
                 <Button
                   size="icon"
                   variant="ghost"