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.
This commit is contained in:
2026-04-07 13:11:35 -04:00
parent 096f548ec3
commit a7716d87df
2 changed files with 12 additions and 11 deletions

View File

@@ -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"