From 8e1573a9ac91fcfc714bb9e48a3e878248efd2cb Mon Sep 17 00:00:00 2001
From: Alexander Gabriel <alexander.gabriel@digital-infinity.de>
Date: Sun, 28 Jun 2026 16:06:31 +0000
Subject: [PATCH] improve visibility

---
 resources/views/camera.blade.php              |  8 +++---
 .../views/livewire/camera-capture.blade.php   | 26 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/resources/views/camera.blade.php b/resources/views/camera.blade.php
index bf05846..5ba7a03 100644
--- a/resources/views/camera.blade.php
+++ b/resources/views/camera.blade.php
@@ -9,11 +9,13 @@
     @endif
     @livewireStyles
 </head>
-<body class="bg-gray-950 text-white min-h-screen flex flex-col items-center justify-center p-6">
+<body class="bg-gray-950 text-white h-screen flex flex-col items-center p-6 overflow-hidden">
 
-    <h1 class="text-3xl font-bold mb-8 tracking-wide">Fotobox</h1>
+    <h1 class="shrink-0 text-3xl font-bold mb-8 tracking-wide">Fotobox</h1>
 
-    @livewire('camera-capture')
+    <div class="flex-1 min-h-0 w-full flex flex-col items-center">
+        @livewire('camera-capture')
+    </div>
 
     @livewireScripts
 </body>
diff --git a/resources/views/livewire/camera-capture.blade.php b/resources/views/livewire/camera-capture.blade.php
index d2be9cf..0ad91d3 100644
--- a/resources/views/livewire/camera-capture.blade.php
+++ b/resources/views/livewire/camera-capture.blade.php
@@ -1,21 +1,23 @@
-<div class="flex flex-col items-center w-full"
+<div class="flex flex-col items-center w-full h-full"
      x-data="{ lightbox: null }"
      x-on:keydown.escape.window="lightbox = null">
 
-    <div class="relative w-full max-w-2xl">
-        <video id="video" autoplay playsinline
-               class="w-full rounded-2xl shadow-2xl bg-gray-900 aspect-video object-cover" style="transform: scaleX(-1);"></video>
+    <div class="flex-1 min-h-0 w-full flex justify-center">
+        <div class="relative h-full" style="aspect-ratio: 16/9; max-width: 100%;">
+            <video id="video" autoplay playsinline
+                   class="w-full h-full rounded-2xl shadow-2xl bg-gray-900" style="transform: scaleX(-1);"></video>
 
-        <canvas id="canvas" class="hidden"></canvas>
+            <canvas id="canvas" class="hidden"></canvas>
 
-        <div id="flash" class="absolute inset-0 rounded-2xl bg-white opacity-0 pointer-events-none transition-opacity duration-150"></div>
+            <div id="flash" class="absolute inset-0 rounded-2xl bg-white opacity-0 pointer-events-none transition-opacity duration-150"></div>
 
-        <div id="countdown" class="absolute inset-0 rounded-2xl hidden items-center justify-center bg-black/40">
-            <span id="countdown-num" class="text-white font-bold drop-shadow-lg" style="font-size: 8rem; line-height: 1;"></span>
+            <div id="countdown" class="absolute inset-0 rounded-2xl hidden items-center justify-center bg-black/40">
+                <span id="countdown-num" class="text-white font-bold drop-shadow-lg" style="font-size: 8rem; line-height: 1;"></span>
+            </div>
         </div>
     </div>
 
-    <div class="mt-6 w-full max-w-xs">
+    <div class="shrink-0 mt-6 w-full max-w-xs">
         <select wire:model="photoprofileId"
                 class="w-full rounded-full bg-black/50 text-white border border-white/20 px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-white/40 appearance-none text-center">
             @foreach ($photoprofiles as $id => $name)
@@ -27,15 +29,15 @@
     <button id="capture-btn"
             wire:loading.attr="disabled"
             @disabled($hasProcessing)
-            class="mt-8 px-10 py-4 bg-white text-gray-950 font-semibold text-lg rounded-full shadow-lg hover:bg-gray-200 active:scale-95 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed">
+            class="shrink-0 mt-8 px-10 py-4 bg-white text-gray-950 font-semibold text-lg rounded-full shadow-lg hover:bg-gray-200 active:scale-95 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed">
         <span wire:loading.remove>{{ $hasProcessing ? 'Erstelle Bild...' : 'Foto aufnehmen' }}</span>
         <span wire:loading>Saving…</span>
     </button>
 
-    <div class="mt-4 text-sm text-gray-400 h-6">{{ $status }}</div>
+    <div class="shrink-0 mt-4 text-sm text-gray-400 h-6">{{ $status }}</div>
 
     @if ($recentPhotos->isNotEmpty())
-        <div class="mt-10 w-full max-w-2xl">
+        <div class="shrink-0 mt-10 w-full max-w-2xl">
             <h2 class="text-sm font-medium text-gray-400 mb-3 tracking-wide uppercase">Recent Photos</h2>
             <div class="grid grid-cols-5 gap-2" @if($hasProcessing) wire:poll.2000ms @endif>
                 @foreach ($recentPhotos as $photo)
