src/components/ai-toolbar.tsx

@@ -1,9 +1,9 @@
-import Image from "next/image";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Card } from "@/components/ui/card";
-import { ImagePicker } from "@/components/image-picker";
 import { X } from "lucide-react";
+import Image from "next/image";
+import { ImagePicker } from "@/components/image-picker";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
 
 interface AIToolbarProps {
 	isAuthenticated: boolean;
@@ -53,13 +53,14 @@ export const AIToolbar = ({
 									onChange={(e) => setAiPrompt(e.target.value)}
 								/>
 								{imagePreview && (
-									<div className="relative mt-2 inline-block">
+									<div className="relative mt-2 inline-block max-w-full overflow-hidden">
 										<Image
 											src={imagePreview}
 											alt="Attached event flyer"
 											className="h-20 rounded-md object-cover border"
 											width={80}
 											height={80}
+											unoptimized
 										/>
 										<Button
 											variant="destructive"

src/components/drag-drop-container.tsx

@@ -1,7 +1,6 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { toast } from "sonner";
-
-const IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp"];
+import { IMAGE_EXTENSIONS } from "@/lib/constants";
 
 const getFileType = (file: File): "ics" | "image" | null => {
 	const name = file.name.toLowerCase();
@@ -53,7 +52,8 @@ export const DragDropContainer = ({
 	};
 
 	return (
-		<div
+		<section
+			aria-label="Drag and drop file import area"
 			onDragOver={handleDragOver}
 			onDragLeave={handleDragLeave}
 			onDrop={handleDrop}
@@ -67,6 +67,6 @@ export const DragDropContainer = ({
 					Drag & Drop *.ics or an event screenshot here
 				</div>
 			</div>
-		</div>
+		</section>
 	);
 };