uploads: fix long filenames not word-wrapping.

Fix a bug where, when uploading a file from disk, if the filename was
too long, it wouldn't get word-wrapped and could break out of the
containing element.

app/components/file_upload_component/file_upload_component.html.erb

@@ -2,8 +2,8 @@
   <%= simple_form_for(Upload.new, url: uploads_path(format: :json), html: { class: "flex flex-col", autocomplete: "off" }, remote: true) do |f| %>
     <%= f.input :file, as: :file, wrapper_html: { class: "hidden" } %>
 
-    <div class="dropzone-container input flex flex-col text-center items-center justify-center rounded-t-lg cursor-pointer">
-      <div class="dropzone-hint py-8">
+    <div class="dropzone-container input flex flex-col text-center items-center justify-center rounded-t-lg cursor-pointer p-4">
+      <div class="dropzone-hint py-4">
         <div>Choose file or drag image here</div>
         <div class="hint">Max size: <%= number_to_human_size(Danbooru.config.max_file_size) %>.</div>
       </div>
@@ -19,11 +19,11 @@
   <% end %>
 
   <template class="dropzone-preview-template">
-    <div class="dz-preview dz-file-preview flex flex-col text-center space-y-4 pt-8">
+    <div class="dz-preview dz-file-preview flex flex-col text-center space-y-4">
       <img class="object-contain px-8 max-h-360px max-w-full" data-dz-thumbnail>
 
       <div class="dz-details">
-        <div class="dz-filename">
+        <div class="dz-filename break-all">
           <span data-dz-name></span>
         </div>
         <div class="dz-size" data-dz-size></div>

app/javascript/src/styles/common/utilities.scss

@@ -33,6 +33,7 @@ $spacer: 0.25rem; /* 4px */
   white-space: nowrap;
 }
 
+.break-all { word-break: break-all; }
 .whitespace-nowrap { white-space: nowrap; }
 
 .leading-none { line-height: 1; }