Merge pull request #859 from MuckRock/allanlasser/issue831

Handle long document names when uploading
MuckRock · Nov 20, 2024 · 74ef31f · 74ef31f
2 parents 1447b3a + 31a2042
commit 74ef31f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/lib/components/forms/UploadListItem.svelte b/src/lib/components/forms/UploadListItem.svelte
@@ -125,8 +125,10 @@
 
 <style>
   .title {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
+    max-width: 100%;
   }
+
   .fileInfo {
     flex: 0 1 0;
     font-size: var(--font-xs);

diff --git a/src/lib/components/forms/stories/DocumentUpload.stories.svelte b/src/lib/components/forms/stories/DocumentUpload.stories.svelte
@@ -47,3 +47,19 @@
     ],
   }}
 />
+
+<Story
+  name="With Long File Name"
+  args={{
+    ...args,
+    files: [
+      new File(
+        [new ArrayBuffer(128000)],
+        "f2a6eaad9a6ebf4753bacd1e9731f29d67c2b84b7098165d2ae9cb83797c52452d66f8d6c342fd29a4229c31b7cd55ad91324be9f897fe5a4b858055d2f0ec65.pdf",
+        {
+          type: "application/pdf",
+        },
+      ),
+    ],
+  }}
+/>
diff --git a/src/lib/components/inputs/Field.svelte b/src/lib/components/inputs/Field.svelte
@@ -46,6 +46,7 @@
     margin: 0.5rem 0;
     font-size: var(--font-sm, 0.875em);
     color: var(--gray-4);
+    word-break: break-all;
   }
   .inline.field {
     width: 100%;