You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
713 lines
22 KiB
713 lines
22 KiB
<template>
|
|
<div v-if="visible" class="dialog-overlay z-[60]">
|
|
<div class="dialog relative">
|
|
<div class="text-lg text-center font-bold relative">
|
|
<h1 id="ViewHeading" class="text-center font-bold">
|
|
<span v-if="uploading">Uploading Image…</span>
|
|
<span v-else-if="blob">Crop Image</span>
|
|
<span v-else-if="showCameraPreview">Upload Image</span>
|
|
<span v-else>Add Photo</span>
|
|
</h1>
|
|
<div
|
|
class="text-2xl text-center px-1 py-0.5 leading-none absolute -right-1 top-0"
|
|
@click="close()"
|
|
>
|
|
<font-awesome icon="xmark" class="w-[1em]"></font-awesome>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FEEDBACK: Show if camera preview is not visible after mounting -->
|
|
<div
|
|
v-if="!showCameraPreview && !blob && isRegistered"
|
|
class="bg-red-100 text-red-700 border border-red-400 rounded px-4 py-3 my-4 text-sm"
|
|
>
|
|
<strong>Camera preview not started.</strong>
|
|
<div v-if="cameraState === 'off'">
|
|
<span v-if="platformCapabilities.isMobile">
|
|
<b>Note:</b> This mobile browser may not support direct camera
|
|
access, or the app is treating it as a native app.<br />
|
|
<b>Tip:</b> Try using a desktop browser, or check if your browser
|
|
supports camera access for web apps.<br />
|
|
<b>Developer:</b> The platform detection logic may be skipping
|
|
camera preview for mobile browsers. <br />
|
|
<b>Action:</b> Review <code>platformCapabilities.isMobile</code> and
|
|
ensure web browsers on mobile are not treated as native apps.
|
|
</span>
|
|
<span v-else>
|
|
<b>Tip:</b> Your browser supports camera APIs, but the preview did
|
|
not start. Try refreshing the page or checking browser permissions.
|
|
</span>
|
|
</div>
|
|
<div v-else-if="cameraState === 'error'">
|
|
<b>Error:</b> {{ error || cameraStateMessage }}
|
|
</div>
|
|
<div v-else>
|
|
<b>Status:</b> {{ cameraStateMessage || "Unknown reason." }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<template v-if="isRegistered">
|
|
<div v-if="!blob">
|
|
<div
|
|
class="border-b border-dashed border-slate-300 text-orange-400 mb-4 font-bold text-sm"
|
|
>
|
|
<span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
|
|
Take a photo with your camera
|
|
</span>
|
|
</div>
|
|
<div
|
|
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
|
|
class="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs z-30"
|
|
@click="toggleDiagnostics"
|
|
>
|
|
{{ showDiagnostics ? "Hide Diagnostics" : "Show Diagnostics" }}
|
|
</button>
|
|
<div class="camera-container w-full h-full relative">
|
|
<video
|
|
ref="videoElement"
|
|
class="camera-video w-full h-full object-cover"
|
|
autoplay
|
|
playsinline
|
|
muted
|
|
></video>
|
|
<button
|
|
class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white text-slate-800 p-3 rounded-full text-2xl leading-none"
|
|
@click="capturePhoto"
|
|
>
|
|
<font-awesome icon="camera" class="w-[1em]" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-4 font-bold text-sm"
|
|
>
|
|
<span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
|
|
OR choose a file from your device
|
|
</span>
|
|
</div>
|
|
<div class="mt-4">
|
|
<input
|
|
type="file"
|
|
class="w-full file:text-center file:bg-gradient-to-b file:from-slate-400 file:to-slate-700 file:shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] file:text-white file:px-3 file:py-2 file:rounded-md file:border-none file:cursor-pointer file:me-2"
|
|
@change="uploadImageFile"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-4 font-bold text-sm"
|
|
>
|
|
<span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
|
|
OR paste an image URL
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-4">
|
|
<input
|
|
v-model="imageUrl"
|
|
type="text"
|
|
class="block w-full rounded border border-slate-400 px-4 py-2"
|
|
placeholder="https://example.com/image.jpg"
|
|
/>
|
|
<button
|
|
v-if="imageUrl"
|
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-md cursor-pointer"
|
|
@click="acceptUrl"
|
|
>
|
|
<font-awesome icon="check" class="fa-fw" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div v-if="uploading" class="flex justify-center">
|
|
<font-awesome
|
|
icon="spinner"
|
|
class="fa-spin fa-3x text-center block px-12 py-12"
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="crop">
|
|
<VuePictureCropper
|
|
:box-style="{
|
|
backgroundColor: '#f8f8f8',
|
|
margin: 'auto',
|
|
}"
|
|
:img="createBlobURL(blob)"
|
|
:options="{
|
|
viewMode: 1,
|
|
dragMode: 'crop',
|
|
aspectRatio: 1 / 1,
|
|
}"
|
|
class="max-h-[90vh] max-w-[90vw] object-contain"
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<div class="flex justify-center">
|
|
<img
|
|
:src="createBlobURL(blob)"
|
|
class="mt-2 rounded max-h-[90vh] max-w-[90vw] object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'grid gap-2 mt-2',
|
|
showRetry ? 'grid-cols-2' : 'grid-cols-1',
|
|
]"
|
|
>
|
|
<button
|
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-2 px-3 rounded-md"
|
|
@click="uploadImage"
|
|
>
|
|
<span>Upload</span>
|
|
</button>
|
|
<button
|
|
v-if="showRetry"
|
|
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-2 px-3 rounded-md"
|
|
@click="retryImage"
|
|
>
|
|
<span>Retry</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div
|
|
id="noticeBeforeUpload"
|
|
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
|
|
role="alert"
|
|
aria-live="polite"
|
|
>
|
|
<p class="mb-2">
|
|
Before you can upload a photo, a friend needs to register you.
|
|
</p>
|
|
<router-link
|
|
:to="{ name: 'contact-qr' }"
|
|
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
|
|
>
|
|
Share Your Info
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import axios from "axios";
|
|
import { ref } from "vue";
|
|
import { Component, Vue } from "vue-facing-decorator";
|
|
import VuePictureCropper, { cropper } from "vue-picture-cropper";
|
|
import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
|
|
import { retrieveSettingsForActiveAccount } from "../db/index";
|
|
import { accessToken } from "../libs/crypto";
|
|
import { logger } from "../utils/logger";
|
|
import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
|
|
|
|
const inputImageFileNameRef = ref<Blob>();
|
|
|
|
@Component({
|
|
components: { VuePictureCropper },
|
|
props: {
|
|
isRegistered: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
})
|
|
export default class ImageMethodDialog extends Vue {
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
|
|
|
/** Active DID for user authentication */
|
|
activeDid = "";
|
|
|
|
/** Current image blob being processed */
|
|
blob?: Blob;
|
|
|
|
/** Type of claim for the image */
|
|
claimType: string = "";
|
|
|
|
/** Whether to show cropping interface */
|
|
crop: boolean = false;
|
|
|
|
/** Name of the selected file */
|
|
fileName?: string;
|
|
|
|
/** Callback function to set image URL after upload */
|
|
imageCallback: (imageUrl?: string) => void = () => {};
|
|
|
|
/** URL for image input */
|
|
imageUrl?: string;
|
|
|
|
/** Whether to show retry button */
|
|
showRetry = true;
|
|
|
|
/** Upload progress state */
|
|
uploading = false;
|
|
|
|
/** Dialog visibility state */
|
|
visible = false;
|
|
|
|
/** Whether to show camera preview */
|
|
showCameraPreview = false;
|
|
|
|
/** Camera stream reference */
|
|
private cameraStream: MediaStream | null = null;
|
|
|
|
private platformService = PlatformServiceFactory.getInstance();
|
|
URL = window.URL || window.webkitURL;
|
|
|
|
private platformCapabilities = this.platformService.getCapabilities();
|
|
|
|
// Add diagnostic properties
|
|
showDiagnostics = false;
|
|
userAgent = navigator.userAgent;
|
|
isSecureContext = window.isSecureContext;
|
|
hasMediaDevices = !!navigator.mediaDevices;
|
|
hasGetUserMedia = !!(
|
|
navigator.mediaDevices && navigator.mediaDevices.getUserMedia
|
|
);
|
|
cameraState:
|
|
| "off"
|
|
| "initializing"
|
|
| "ready"
|
|
| "active"
|
|
| "error"
|
|
| "permission_denied"
|
|
| "not_found"
|
|
| "in_use" = "off";
|
|
cameraStateMessage?: string;
|
|
error: string | null = null;
|
|
|
|
/**
|
|
* Lifecycle hook: Initializes component and retrieves user settings
|
|
* @throws {Error} When settings retrieval fails
|
|
*/
|
|
async mounted() {
|
|
logger.log("ImageMethodDialog mounted");
|
|
try {
|
|
const settings = await retrieveSettingsForActiveAccount();
|
|
this.activeDid = settings.activeDid || "";
|
|
} catch (error: unknown) {
|
|
logger.error("Error retrieving settings from database:", error);
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text:
|
|
error instanceof Error
|
|
? error.message
|
|
: "There was an error retrieving your settings.",
|
|
},
|
|
-1,
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Lifecycle hook: Cleans up camera stream when component is destroyed
|
|
*/
|
|
beforeDestroy() {
|
|
this.stopCameraPreview();
|
|
}
|
|
|
|
open(setImageFn: (arg: string) => void, claimType: string, crop?: boolean) {
|
|
this.claimType = claimType;
|
|
this.crop = !!crop;
|
|
this.imageCallback = setImageFn;
|
|
this.visible = true;
|
|
|
|
// Start camera preview immediately if not on mobile
|
|
if (!this.platformCapabilities.isNativeApp) {
|
|
this.startCameraPreview();
|
|
}
|
|
}
|
|
|
|
async uploadImageFile(event: Event) {
|
|
const target = event.target as HTMLInputElement;
|
|
if (!target.files) return;
|
|
|
|
inputImageFileNameRef.value = target.files[0];
|
|
const file = inputImageFileNameRef.value;
|
|
if (file != null) {
|
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
|
const data = e.target?.result as ArrayBuffer;
|
|
if (data) {
|
|
const blob = new Blob([new Uint8Array(data)], {
|
|
type: file.type,
|
|
});
|
|
this.blob = blob;
|
|
this.fileName = file.name;
|
|
this.showRetry = false;
|
|
}
|
|
};
|
|
reader.readAsArrayBuffer(file as Blob);
|
|
}
|
|
}
|
|
|
|
async acceptUrl() {
|
|
if (this.crop) {
|
|
try {
|
|
const urlBlobResponse = await axios.get(this.imageUrl as string, {
|
|
responseType: "blob",
|
|
});
|
|
const fullUrl = new URL(this.imageUrl as string);
|
|
const fileName = fullUrl.pathname.split("/").pop() as string;
|
|
this.blob = urlBlobResponse.data as Blob;
|
|
this.fileName = fileName;
|
|
this.showRetry = false;
|
|
} catch (error) {
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: "There was an error retrieving that image.",
|
|
},
|
|
5000,
|
|
);
|
|
}
|
|
} else {
|
|
this.imageCallback(this.imageUrl);
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
close() {
|
|
this.visible = false;
|
|
this.stopCameraPreview();
|
|
const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
|
|
if (bottomNav) {
|
|
bottomNav.style.display = "";
|
|
}
|
|
this.blob = undefined;
|
|
this.showCameraPreview = false;
|
|
}
|
|
|
|
async startCameraPreview() {
|
|
logger.debug("startCameraPreview called");
|
|
logger.debug("Current showCameraPreview state:", this.showCameraPreview);
|
|
logger.debug("Platform capabilities:", this.platformCapabilities);
|
|
|
|
if (this.platformCapabilities.isNativeApp) {
|
|
logger.debug("Using platform service for mobile device");
|
|
this.cameraState = "initializing";
|
|
this.cameraStateMessage = "Using platform camera service...";
|
|
try {
|
|
const result = await this.platformService.takePicture();
|
|
this.blob = result.blob;
|
|
this.fileName = result.fileName;
|
|
this.cameraState = "ready";
|
|
this.cameraStateMessage = "Photo captured successfully";
|
|
} catch (error) {
|
|
logger.error("Error taking picture:", error);
|
|
this.cameraState = "error";
|
|
this.cameraStateMessage =
|
|
error instanceof Error ? error.message : "Failed to take picture";
|
|
this.error =
|
|
error instanceof Error ? error.message : "Failed to take picture";
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: "Failed to take picture. Please try again.",
|
|
},
|
|
5000,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
|
|
logger.debug("Starting camera preview for desktop browser");
|
|
try {
|
|
this.cameraState = "initializing";
|
|
this.cameraStateMessage = "Requesting camera access...";
|
|
this.showCameraPreview = true;
|
|
await this.$nextTick();
|
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: { facingMode: "environment" },
|
|
});
|
|
logger.debug("Camera access granted");
|
|
this.cameraStream = stream;
|
|
this.cameraState = "active";
|
|
this.cameraStateMessage = "Camera is active";
|
|
|
|
await this.$nextTick();
|
|
|
|
const videoElement = this.$refs.videoElement as HTMLVideoElement;
|
|
if (videoElement) {
|
|
videoElement.srcObject = stream;
|
|
await new Promise((resolve) => {
|
|
videoElement.onloadedmetadata = () => {
|
|
videoElement.play().then(() => {
|
|
resolve(true);
|
|
});
|
|
};
|
|
});
|
|
}
|
|
} catch (error) {
|
|
logger.error("Error starting camera preview:", error);
|
|
let errorMessage =
|
|
error instanceof Error ? error.message : "Failed to access camera";
|
|
if (
|
|
error.name === "NotReadableError" ||
|
|
error.name === "TrackStartError"
|
|
) {
|
|
errorMessage =
|
|
"Camera is in use by another application. Please close any other apps or browser tabs using the camera and try again.";
|
|
} else if (
|
|
error.name === "NotAllowedError" ||
|
|
error.name === "PermissionDeniedError"
|
|
) {
|
|
errorMessage =
|
|
"Camera access was denied. Please allow camera access in your browser settings.";
|
|
}
|
|
this.cameraState = "error";
|
|
this.cameraStateMessage = errorMessage;
|
|
this.error = errorMessage;
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: errorMessage,
|
|
},
|
|
5000,
|
|
);
|
|
this.showCameraPreview = false;
|
|
}
|
|
}
|
|
|
|
stopCameraPreview() {
|
|
if (this.cameraStream) {
|
|
this.cameraStream.getTracks().forEach((track) => track.stop());
|
|
this.cameraStream = null;
|
|
}
|
|
this.showCameraPreview = false;
|
|
this.cameraState = "off";
|
|
this.cameraStateMessage = "Camera stopped";
|
|
this.error = null;
|
|
}
|
|
|
|
async capturePhoto() {
|
|
if (!this.cameraStream) return;
|
|
|
|
try {
|
|
const videoElement = this.$refs.videoElement as HTMLVideoElement;
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = videoElement.videoWidth;
|
|
canvas.height = videoElement.videoHeight;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx?.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
|
|
canvas.toBlob(
|
|
(blob) => {
|
|
if (blob) {
|
|
this.blob = blob;
|
|
this.fileName = `photo_${Date.now()}.jpg`;
|
|
this.showRetry = true;
|
|
this.stopCameraPreview();
|
|
}
|
|
},
|
|
"image/jpeg",
|
|
0.95,
|
|
);
|
|
} catch (error) {
|
|
logger.error("Error capturing photo:", error);
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: "Failed to capture photo. Please try again.",
|
|
},
|
|
5000,
|
|
);
|
|
}
|
|
}
|
|
|
|
private createBlobURL(blob: Blob): string {
|
|
return URL.createObjectURL(blob);
|
|
}
|
|
|
|
async retryImage() {
|
|
this.blob = undefined;
|
|
if (!this.platformCapabilities.isNativeApp) {
|
|
await this.startCameraPreview();
|
|
}
|
|
}
|
|
|
|
async uploadImage() {
|
|
this.uploading = true;
|
|
|
|
if (this.crop) {
|
|
this.blob = (await cropper?.getBlob()) || undefined;
|
|
}
|
|
|
|
const token = await accessToken(this.activeDid);
|
|
const headers = {
|
|
Authorization: "Bearer " + token,
|
|
};
|
|
const formData = new FormData();
|
|
if (!this.blob) {
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: "There was an error finding the picture. Please try again.",
|
|
},
|
|
5000,
|
|
);
|
|
this.uploading = false;
|
|
return;
|
|
}
|
|
formData.append("image", this.blob, this.fileName || "photo.jpg");
|
|
formData.append("claimType", this.claimType);
|
|
try {
|
|
if (
|
|
window.location.hostname === "localhost" &&
|
|
!DEFAULT_IMAGE_API_SERVER.includes("localhost")
|
|
) {
|
|
logger.log(
|
|
"Using shared image API server, so only users on that server can play with images.",
|
|
);
|
|
}
|
|
const response = await axios.post(
|
|
DEFAULT_IMAGE_API_SERVER + "/image",
|
|
formData,
|
|
{ headers },
|
|
);
|
|
this.uploading = false;
|
|
|
|
this.close();
|
|
this.imageCallback(response.data.url as string);
|
|
} catch (error: unknown) {
|
|
let errorMessage = "There was an error saving the picture.";
|
|
|
|
if (axios.isAxiosError(error)) {
|
|
const status = error.response?.status;
|
|
const data = error.response?.data;
|
|
|
|
if (status === 401) {
|
|
errorMessage = "Authentication failed. Please try logging in again.";
|
|
} else if (status === 413) {
|
|
errorMessage = "Image file is too large. Please try a smaller image.";
|
|
} else if (status === 415) {
|
|
errorMessage =
|
|
"Unsupported image format. Please try a different image.";
|
|
} else if (status && status >= 500) {
|
|
errorMessage = "Server error. Please try again later.";
|
|
} else if (data?.message) {
|
|
errorMessage = data.message;
|
|
}
|
|
}
|
|
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: errorMessage,
|
|
},
|
|
5000,
|
|
);
|
|
this.uploading = false;
|
|
this.blob = undefined;
|
|
}
|
|
}
|
|
|
|
// Add toggle method
|
|
toggleDiagnostics() {
|
|
this.showDiagnostics = !this.showDiagnostics;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dialog-overlay {
|
|
z-index: 50;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.dialog {
|
|
background-color: white;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
max-height: 90vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Add styles for diagnostic panel */
|
|
.diagnostic-panel {
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|
|
|