From 062a67086e8f411aa1febab97a548b3b3b40c399 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 6 Dec 2022 19:39:38 -0600
Subject: [PATCH] media assets: fix sidebar overflow on Chrome.

Fix bug on the media assets show page where very long EXIF values wouldn't be word-broken, so they
could cause the sidebar to become wider than the screen. This only affected Chrome, not Firefox or
Safari.

Example: https://danbooru.donmai.us/media_assets/7167264
---
 app/javascript/src/styles/common/utilities.scss | 3 ++-
 app/views/media_assets/show.html.erb            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index 1553c3864..c396e2cb0 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -48,7 +48,8 @@ $spacer: 0.25rem; /* 4px */
 .overflow-auto { overflow: auto; }
 .overflow-hidden { overflow: hidden; }
 
-.break-all { word-break: break-all; }
+.break-all { word-break: break-all; overflow-wrap: anywhere; }
+.break-words { word-break: break-word; overflow-wrap: anywhere; }
 .whitespace-nowrap { white-space: nowrap; }
 
 .pointer-events-none { pointer-events: none; }
diff --git a/app/views/media_assets/show.html.erb b/app/views/media_assets/show.html.erb
index 7ba6c7bd0..2c74a8ca8 100644
--- a/app/views/media_assets/show.html.erb
+++ b/app/views/media_assets/show.html.erb
@@ -182,7 +182,7 @@
               <% pairs.sort.each do |key, value| %>
                 <tr>
                   <th class="text-left w-1/4"><%= key.split(":").second.scan(/(?:[A-Z][a-z]+|[A-Z]+(?![a-z]))/).join(" ") %></th>
-                  <td class="break-all"><%= link_to value, media_assets_path(search: { metadata: { key => value }}) %></td>
+                  <td class="break-words"><%= link_to value, media_assets_path(search: { metadata: { key => value }}) %></td>
                 </tr>
               <% end %>
             <% end %>