Fix overflow with very long file/directory names

Author: jpenilla

web/src/lib/components/files/DirectorySelect.svelte

@@ -10,11 +10,11 @@
     let { placeholder = "Select Directory", directory = $bindable<DirectoryEntry | undefined>(undefined) }: Props = $props();
 </script>
 
-<DirectoryInput class="flex items-center gap-2 rounded-md border btn-ghost px-2 py-1" bind:directory>
+<DirectoryInput class="flex max-w-full items-center gap-2 rounded-md border btn-ghost px-2 py-1" bind:directory>
     {#snippet children({ directory })}
         <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-directory-16"></span>
         {#if directory}
-            {directory.fileName}
+            <span class="truncate">{directory.fileName}</span>
         {:else}
             <span class="font-light">{placeholder}</span>
         {/if}

web/src/lib/components/files/SingleFileInput.svelte

@@ -29,10 +29,10 @@
     const inputId = `${uid}-input`;
 </script>
 
-<label id={labelId} for={inputId} class="relative flex w-fit items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
+<label id={labelId} for={inputId} class="relative flex w-fit max-w-full items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
     <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-16"></span>
     {#if file}
-        {file.name}
+        <span class="truncate">{file.name}</span>
     {:else}
         <span class="font-light">{label}</span>
     {/if}