From 09d6c602be077e0eaca2162855486af9c9261f4f Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Sat, 29 Jan 2022 04:49:43 -0600
Subject: [PATCH] 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.
---
 .../file_upload_component/file_upload_component.html.erb  | 8 ++++----
 app/javascript/src/styles/common/utilities.scss           | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/file_upload_component/file_upload_component.html.erb b/app/components/file_upload_component/file_upload_component.html.erb
index 7f124b57a..83305ead9 100644
--- a/app/components/file_upload_component/file_upload_component.html.erb
+++ b/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>
diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index 2788b33f4..0b5267adc 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/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; }