jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

media assets: fix sidebar overflow on Chrome.

Browse Source 
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
This commit is contained in:
evazion
2022-12-06 19:39:38 -06:00
parent 697691589e
commit 062a67086e
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/src/styles/common/utilities.scss
View File

@@ -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; }

2
app/views/media_assets/show.html.erb
View File

@@ -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 %>