From a7716d87df7025dc956b1194d71241f6b254dd79 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Tue, 7 Apr 2026 13:11:35 -0400
Subject: [PATCH] fix(components): add unoptimized image prop, overflow
 containment, and accessibility

Add unoptimized prop to image preview to support blob URLs, contain
overflow on preview container, replace div with semantic section
element in DragDropContainer with aria-label, and import shared
image constants.
---
 src/components/ai-toolbar.tsx          | 13 +++++++------
 src/components/drag-drop-container.tsx | 10 +++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ai-toolbar.tsx b/src/components/ai-toolbar.tsx
index f0a1bac..1cf1c78 100644
--- a/src/components/ai-toolbar.tsx
+++ b/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"
diff --git a/src/components/drag-drop-container.tsx b/src/components/drag-drop-container.tsx
index 1383fb0..1a6a762 100644
--- a/src/components/drag-drop-container.tsx
+++ b/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>
 	);
 };