From b42a866cbfaebf829559f612936d71820ca452ef Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 12:09:11 +0100
Subject: [PATCH] [dyad] Removed scrollbar from image list - wrote 1 file(s)

---
 src/components/image-converter.tsx | 89 +++++++++++++++---------------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index f5ce406..08eff93 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -17,7 +17,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { Upload, Download, X, Trash2, Check } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
@@ -526,52 +525,50 @@ export function ImageConverter() {
               </div>
             </CardHeader>
             <CardContent>
-              <ScrollArea className="h-[400px] pr-4">
-                <div className="space-y-4">
-                  {previewUrls.map((url, index) => {
-                    const finalFilename = generateFinalFilename(index, true);
-                    return (
-                      <div key={url} className="p-4 border rounded-lg flex items-center gap-4">
-                        <img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />
-                        <div className="flex-1 min-w-0">
-                          <Label htmlFor={`filename-${index}`} className="text-xs text-muted-foreground">Base Name</Label>
-                          <Input
-                            id={`filename-${index}`}
-                            value={filenames[index]}
-                            onChange={(e) => handleFilenameChange(index, e.target.value)}
-                            className="text-sm font-medium h-8 mt-1"
-                          />
-                          <p className="text-xs text-muted-foreground truncate mt-1" title={`${finalFilename}.${format}`}>
-                            Final name: {finalFilename}.{format}
-                          </p>
-                        </div>
-                        <div className="flex items-center shrink-0">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="text-gray-500 hover:text-primary"
-                            onClick={() => handleConvertAndDownloadSingle(index)}
-                            disabled={isConverting || convertingIndex !== null}
-                            title="Download this image"
-                          >
-                            <Download className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="shrink-0 text-gray-500 hover:text-destructive"
-                            onClick={() => handleRemoveImage(index)}
-                            disabled={isConverting || convertingIndex !== null}
-                            title="Remove this image"
-                          >
-                            <X className="h-4 w-4" />
-                          </Button>
-                        </div>
+              <div className="space-y-4">
+                {previewUrls.map((url, index) => {
+                  const finalFilename = generateFinalFilename(index, true);
+                  return (
+                    <div key={url} className="p-4 border rounded-lg flex items-center gap-4">
+                      <img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <Label htmlFor={`filename-${index}`} className="text-xs text-muted-foreground">Base Name</Label>
+                        <Input
+                          id={`filename-${index}`}
+                          value={filenames[index]}
+                          onChange={(e) => handleFilenameChange(index, e.target.value)}
+                          className="text-sm font-medium h-8 mt-1"
+                        />
+                        <p className="text-xs text-muted-foreground truncate mt-1" title={`${finalFilename}.${format}`}>
+                          Final name: {finalFilename}.{format}
+                        </p>
                       </div>
-                    );
-                  })}
-                </div>
-              </ScrollArea>
+                      <div className="flex items-center shrink-0">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-gray-500 hover:text-primary"
+                          onClick={() => handleConvertAndDownloadSingle(index)}
+                          disabled={isConverting || convertingIndex !== null}
+                          title="Download this image"
+                        >
+                          <Download className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="shrink-0 text-gray-500 hover:text-destructive"
+                          onClick={() => handleRemoveImage(index)}
+                          disabled={isConverting || convertingIndex !== null}
+                          title="Remove this image"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
             </CardContent>
           </Card>
         )}