recent photos right, no hang of camera

resources/views/livewire/camera-capture.blade.php

@@ -1,7 +1,9 @@
 <div class="flex flex-col items-center w-full"
-     x-data="{ lightbox: null }"
+     x-data="{ lightbox: null, deleteConfirmId: null }"
-     x-on:keydown.escape.window="lightbox = null">
+     x-on:keydown.escape.window="lightbox = null; deleteConfirmId = null">
 
+    <div class="flex flex-col lg:flex-row lg:items-start gap-6 w-full max-w-6xl justify-center">
+        <div class="flex flex-col items-center w-full lg:w-auto">
             <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>
@@ -38,11 +40,12 @@
             </button>
 
             <div class="mt-4 text-sm text-gray-400 h-6">{{ $status }}</div>
+        </div>
 
         @if ($recentPhotos->isNotEmpty())
-        <div class="mt-10 w-full max-w-2xl">
+            <div class="w-full lg:w-64 lg:shrink-0">
                 <h2 class="text-sm font-medium text-gray-400 mb-3 tracking-wide uppercase">Fotos</h2>
-            <div class="grid grid-cols-5 gap-2" @if($hasProcessing) wire:poll.2000ms @endif>
+                <div class="grid grid-cols-5 lg:grid-cols-3 gap-2" @if($hasProcessing) wire:poll.2000ms @endif>
                     @foreach ($recentPhotos as $photo)
                         <div class="relative">
                             @if ($photo['status'] === 'processing')
@@ -60,7 +63,7 @@
                                 <img src="{{ $photo['url'] }}" alt="Photo #{{ $photo['id'] }}"
                                      class="w-full aspect-square object-cover rounded-lg border border-gray-700 cursor-pointer"
                                      x-on:click="lightbox = {{ Js::from($photo) }}">
-                            <button wire:click="delete({{ $photo['id'] }})" wire:confirm="Delete this photo?"
+                                <button x-on:click="deleteConfirmId = {{ $photo['id'] }}"
                                         class="absolute top-1 right-1 p-1 rounded bg-black/60 text-white hover:bg-red-600/80 transition-colors">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
                                         <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
@@ -75,6 +78,28 @@
                 </div>
             </div>
         @endif
+    </div>
+
+    {{-- Delete confirmation --}}
+    <div x-show="deleteConfirmId"
+         wire:ignore
+         x-on:click.self="deleteConfirmId = null"
+         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
+         style="display:none">
+        <div class="max-w-sm w-full rounded-2xl bg-gray-900 border border-white/10 p-6 shadow-2xl text-center">
+            <p class="text-white mb-6">Foto wirklich löschen?</p>
+            <div class="flex justify-center gap-3">
+                <button x-on:click="deleteConfirmId = null"
+                        class="px-5 py-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors">
+                    Abbrechen
+                </button>
+                <button x-on:click="$wire.delete(deleteConfirmId); deleteConfirmId = null"
+                        class="px-5 py-2 rounded-full bg-red-600 text-white hover:bg-red-500 transition-colors">
+                    Löschen
+                </button>
+            </div>
+        </div>
+    </div>
 
     {{-- Lightbox --}}
     <div x-show="lightbox"