Repositioned diagnostics over camera preview

src/components/ImageMethodDialog.vue

@@ -1,37 +1,6 @@
 <template>
   <div v-if="visible" class="dialog-overlay z-[60]">
     <div class="dialog relative">
-      <!-- Diagnostic Panel -->
-      <div
-        v-if="showDiagnostics"
-        class="absolute top-0 left-0 right-0 bg-black/80 text-white text-xs p-2 z-20 overflow-auto max-h-[30vh]"
-      >
-        <div class="grid grid-cols-2 gap-2">
-          <div>
-            <p><strong>Camera State:</strong> {{ cameraState }}</p>
-            <p><strong>State Message:</strong> {{ cameraStateMessage || 'None' }}</p>
-            <p><strong>Error:</strong> {{ error || 'None' }}</p>
-            <p><strong>Preview Active:</strong> {{ showCameraPreview ? 'Yes' : 'No' }}</p>
-            <p><strong>Stream Active:</strong> {{ !!cameraStream ? 'Yes' : 'No' }}</p>
-          </div>
-          <div>
-            <p><strong>Browser:</strong> {{ userAgent }}</p>
-            <p><strong>HTTPS:</strong> {{ isSecureContext ? 'Yes' : 'No' }}</p>
-            <p><strong>MediaDevices:</strong> {{ hasMediaDevices ? 'Yes' : 'No' }}</p>
-            <p><strong>GetUserMedia:</strong> {{ hasGetUserMedia ? 'Yes' : 'No' }}</p>
-            <p><strong>Platform:</strong> {{ platformCapabilities.isMobile ? 'Mobile' : 'Desktop' }}</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Toggle Diagnostics Button -->
-      <button
-        @click="toggleDiagnostics"
-        class="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs z-30"
-      >
-        {{ showDiagnostics ? 'Hide Diagnostics' : 'Show Diagnostics' }}
-      </button>
-
       <div class="text-lg text-center font-bold relative">
         <h1 id="ViewHeading" class="text-center font-bold">
           <span v-if="uploading">Uploading Image&hellip;</span>
@@ -83,6 +52,35 @@
               v-if="showCameraPreview"
               class="camera-preview relative flex bg-black overflow-hidden mb-4"
             >
+              <!-- Diagnostic Panel -->
+              <div
+                v-if="showDiagnostics"
+                class="absolute top-0 left-0 right-0 bg-black/80 text-white text-xs p-2 pt-8 z-20 overflow-auto max-h-[50vh]"
+              >
+                <div class="grid grid-cols-2 gap-2">
+                  <div>
+                    <p><strong>Camera State:</strong> {{ cameraState }}</p>
+                    <p><strong>State Message:</strong> {{ cameraStateMessage || 'None' }}</p>
+                    <p><strong>Error:</strong> {{ error || 'None' }}</p>
+                    <p><strong>Preview Active:</strong> {{ showCameraPreview ? 'Yes' : 'No' }}</p>
+                    <p><strong>Stream Active:</strong> {{ !!cameraStream ? 'Yes' : 'No' }}</p>
+                  </div>
+                  <div>
+                    <p><strong>Browser:</strong> {{ userAgent }}</p>
+                    <p><strong>HTTPS:</strong> {{ isSecureContext ? 'Yes' : 'No' }}</p>
+                    <p><strong>MediaDevices:</strong> {{ hasMediaDevices ? 'Yes' : 'No' }}</p>
+                    <p><strong>GetUserMedia:</strong> {{ hasGetUserMedia ? 'Yes' : 'No' }}</p>
+                    <p><strong>Platform:</strong> {{ platformCapabilities.isMobile ? 'Mobile' : 'Desktop' }}</p>
+                  </div>
+                </div>
+              </div>
+              <!-- Toggle Diagnostics Button -->
+              <button
+                @click="toggleDiagnostics"
+                class="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs z-30"
+              >
+                {{ showDiagnostics ? 'Hide Diagnostics' : 'Show Diagnostics' }}
+              </button>
               <div class="camera-container w-full h-full relative">
                 <video
                   ref="videoElement"