renders thumbnails

src/lib/components/ProcessedZipArchiveEditor.svelte

@@ -4,11 +4,14 @@
 
     type Props = {
         archive: ProcessedZipArchive;
+        thumbnailWidth: number;
         onArchiveChange?: (archive: ProcessedZipArchive) => void;
     };
 
     let {
-        archive, onArchiveChange = () => {
+        archive,
+        thumbnailWidth = 200,
+        onArchiveChange = () => {
         }
     }: Props = $props();
 
@@ -112,6 +115,7 @@
                     class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${
                     dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
                 } ${dragIndex === index ? "opacity-60" : ""}`}
+                    style={`width: ${thumbnailWidth}px;`}
                     draggable="true"
                     ondragstart={(event) => handleDragStart(index, event)}
                     ondragover={(event) => handleDragOver(index, event)}
@@ -128,13 +132,14 @@
                         ::
                     </button>
 
-                    <div class="min-w-0 text-[13px] font-medium leading-tight text-primary-900">
+                    <div
+                            class="truncate text-[13px] font-medium leading-tight text-primary-900"
+                            title={attachment.name}
+                    >
                         {attachment.name}
                     </div>
                 </div>
-                <div class="shrink-0">
-                    <AttachmentPreview {attachment} class="h-full w-full"/>
-                </div>
+                <AttachmentPreview {attachment} />
             </li>
         {/each}
     </ul>