pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Removed scrollbar from image list - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 12:09:11 +01:00
parent e1a0f82e94
commit b42a866cbf
1 changed files with 43 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/image-converter.tsx
View File

@@ -17,7 +17,6 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Upload, Download, X, Trash2, Check } from "lucide-react"; import { Upload, Download, X, Trash2, Check } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -526,52 +525,50 @@ export function ImageConverter() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ScrollArea className="h-[400px] pr-4"> <div className="space-y-4">
<div className="space-y-4"> {previewUrls.map((url, index) => {
{previewUrls.map((url, index) => { const finalFilename = generateFinalFilename(index, true);
const finalFilename = generateFinalFilename(index, true); return (
return ( <div key={url} className="p-4 border rounded-lg flex items-center gap-4">
<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" />
<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">
<div className="flex-1 min-w-0"> <Label htmlFor={`filename-${index}`} className="text-xs text-muted-foreground">Base Name</Label>
<Label htmlFor={`filename-${index}`} className="text-xs text-muted-foreground">Base Name</Label> <Input
<Input id={`filename-${index}`}
id={`filename-${index}`} value={filenames[index]}
value={filenames[index]} onChange={(e) => handleFilenameChange(index, e.target.value)}
onChange={(e) => handleFilenameChange(index, e.target.value)} className="text-sm font-medium h-8 mt-1"
className="text-sm font-medium h-8 mt-1" />
/> <p className="text-xs text-muted-foreground truncate mt-1" title={`${finalFilename}.${format}`}>
<p className="text-xs text-muted-foreground truncate mt-1" title={`${finalFilename}.${format}`}> Final name: {finalFilename}.{format}
Final name: {finalFilename}.{format} </p>
</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> </div>
); <div className="flex items-center shrink-0">
})} <Button
</div> variant="ghost"
</ScrollArea> 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> </CardContent>
</Card> </Card>
)} )}