From 08aeac7c97f7d5b3d15b663c9dd509e16568bf26 Mon Sep 17 00:00:00 2001
From: ffont <frederic.font@upf.edu>
Date: Tue, 4 Jun 2024 16:12:33 +0200
Subject: [PATCH] Add ellipsis and word-wrap-break-word in a number of places

This fixes some bugs with unusually long words.

Closes #1758
---
 freesound/static/bw-frontend/styles/modifiers/text.scss | 4 ++++
 templates/forum/display_forum.html                      | 2 +-
 templates/forum/display_post.html                       | 2 +-
 templates/forum/display_thread.html                     | 2 +-
 templates/moderation/assign_sounds.html                 | 2 +-
 templates/moderation/display_ticket.html                | 2 +-
 templates/sounds/pack.html                              | 4 ++--
 templates/sounds/sound.html                             | 8 ++++----
 8 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/freesound/static/bw-frontend/styles/modifiers/text.scss b/freesound/static/bw-frontend/styles/modifiers/text.scss
index 04373cef1..337702192 100644
--- a/freesound/static/bw-frontend/styles/modifiers/text.scss
+++ b/freesound/static/bw-frontend/styles/modifiers/text.scss
@@ -90,6 +90,10 @@
   letter-spacing: 0;
 }
 
+.word-wrap-break-word{
+  word-wrap: break-word;
+}
+
 @for $i from 14 through 50 {
   .text-#{$i} {
     font-size: #{$i}px;
diff --git a/templates/forum/display_forum.html b/templates/forum/display_forum.html
index 7f0a852af..05f7fa5f0 100644
--- a/templates/forum/display_forum.html
+++ b/templates/forum/display_forum.html
@@ -20,7 +20,7 @@ <h6><a href="{{ forum.get_absolute_url }}">{{ forum.name }}</a></h6>
             </div>
             <div class="col-md-2 text-center d-none d-md-block">
                 <div class="inline-block padding-bottom-1">{% bw_user_avatar forum.last_post.author.profile.locations.avatar.M.url forum.last_post.author.username 30 %}</div>
-                <p>by <a href="{% url "account" forum.last_post.author.username %}">{{ forum.last_post.author.username }}</a></p>
+                <p class="ellipsis">by <a href="{% url "account" forum.last_post.author.username %}">{{ forum.last_post.author.username }}</a></p>
             </div>
         {% endif %}
     </div>
diff --git a/templates/forum/display_post.html b/templates/forum/display_post.html
index f6ddbbb4b..9065f85cd 100644
--- a/templates/forum/display_post.html
+++ b/templates/forum/display_post.html
@@ -18,7 +18,7 @@ <h6 class="ellipsis"><a href="{% url "account" post.author.username %}">{{ post.
                 </div>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-lg-9 word-wrap-break-word">
             <div class="{% if show_action_icons %}between{% endif %}">
                 {% if show_post_location %}
                     <div class="v-spacing-1">
diff --git a/templates/forum/display_thread.html b/templates/forum/display_thread.html
index fba63d12c..0fdb43adb 100644
--- a/templates/forum/display_thread.html
+++ b/templates/forum/display_thread.html
@@ -12,7 +12,7 @@
         </div>
         <div class="col-10 col-md-5">
             <h6><a href="{% url "forums-thread" thread.forum.name_slug thread.id %}" {% if thread.status != 2 %}class="text-black"{% endif %}>{{ thread.title|safe }}</a></h6>
-            <p>Started by <a href="{% url 'account' thread.author.username%}">{{ thread.author.username }}</a> {{thread.first_post.created|timesince}} ago · {{ thread.num_posts|bw_intcomma }} repl{{ thread.num_posts|pluralize:"y,ies" }}</p>
+            <p class="ellipsis">Started by <a href="{% url 'account' thread.author.username%}">{{ thread.author.username }}</a> {{thread.first_post.created|timesince}} ago · {{ thread.num_posts|bw_intcomma }} repl{{ thread.num_posts|pluralize:"y,ies" }}</p>
         </div>
         <div class="col-md-4 offset-md-2 d-none d-md-block">
             {% cache 86400 bw_thread_common_commenters thread.id %}
diff --git a/templates/moderation/assign_sounds.html b/templates/moderation/assign_sounds.html
index fc47e2fc7..71810fc0e 100644
--- a/templates/moderation/assign_sounds.html
+++ b/templates/moderation/assign_sounds.html
@@ -28,7 +28,7 @@ <h3>Unassigned sound tickets ({{ num_sounds_pending }})</h3>
                 <div>
                     {% bw_user_avatar item.user.profile.locations.avatar.L.url item.user.username 70 %}
                 </div>
-                <div class="padding-left-3">
+                <div class="padding-left-3 ellipsis">
                     <a href="{% url "account" item.username %}">{{ item.username }}</a>
                     <br><a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "tickets-user-pending_sounds" item.username %}?ajax=1" href="javascript:void(0);">
                         {{ item.new_count }} unassigned sound{{ item.new_count|pluralize }}
diff --git a/templates/moderation/display_ticket.html b/templates/moderation/display_ticket.html
index 56a7835f5..b47f22b24 100644
--- a/templates/moderation/display_ticket.html
+++ b/templates/moderation/display_ticket.html
@@ -7,7 +7,7 @@
         <div class="bw-player-small-thumbnail-empty-space center middle text-grey">No sound available for this ticket</div>
     {% endif %}
 </div>
-<div class="v-spacing-top-2 text-grey">
+<div class="v-spacing-top-2 text-grey word-wrap-break-word">
     <div>
         <a href="{% url 'tickets-ticket' ticket.key %}"><span class="text-grey">{% bw_icon "file-text" %} Ticket #{{ ticket.id }}:</span> {{ sound.original_filename }}</a> by <a class="bw-link--black" href="{% url "account" ticket.sender.username %}">{{ ticket.sender.username }}</a>
     </div>
diff --git a/templates/sounds/pack.html b/templates/sounds/pack.html
index cc558fffa..2b34e61bc 100644
--- a/templates/sounds/pack.html
+++ b/templates/sounds/pack.html
@@ -16,7 +16,7 @@
         <div class="navbar-space-filler v-spacing-7 padding-bottom-7 v-spacing-top-5">
             <div class="row no-gutters">
                 <div class="col-md-8">
-                    <div class="bw-sound-page__information">
+                    <div class="bw-sound-page__information word-wrap-break-word">
                         <div class="row middle">
                             <div class="col-10">
                                 <h1><span class="text-light-grey">Pack: </span>{{ pack.name }} </h1>
@@ -24,7 +24,7 @@ <h1><span class="text-light-grey">Pack: </span>{{ pack.name }} </h1>
                         </div>
                         <div class="middle v-spacing-top-2">{% bw_generic_stars pack.avg_rating %}<span class="text-grey h-spacing-left-1">{% if pack.num_ratings %}Pack sound's overall rating ({{ pack.num_ratings|formatnumber }}){% else %}Not enough ratings{% endif %}</span></div>
                         <div class="middle bw-sound-page__user v-spacing-top-5">
-                            <div class="h-spacing-1">
+                            <div class="h-spacing-1 ellipsis">
                                 {% bw_user_avatar pack.user.profile.locations.avatar.M.url pack.user.username 40 %}
                             </div>
                             <div class="h-spacing-left-1">
diff --git a/templates/sounds/sound.html b/templates/sounds/sound.html
index eb572da51..f19dfbd12 100644
--- a/templates/sounds/sound.html
+++ b/templates/sounds/sound.html
@@ -52,7 +52,7 @@ <h4>Content warning</h4>
             <div class="row no-gutters {% if is_explicit %}blur{% endif %}">
                 <div class="col-md-8">
                     {% display_sound_big_no_info_no_bookmark sound %}
-                    <div class="bw-sound-page__information v-spacing-top-5">
+                    <div class="bw-sound-page__information v-spacing-top-5 word-wrap-break-word">
                         {% cache 3600 bw_sound_page sound.id %}
                         <div class="row middle">
                             <div class="col-10 overflow-hidden">
@@ -85,7 +85,7 @@ <h1><a class="bw-link--black" href="{% url 'sound' sound.user.username sound.id
                             <div class="h-spacing-1">
                                 {% bw_user_avatar sound.user.profile.locations.avatar.M.url sound.user.username 40 %}
                             </div>
-                            <div class="h-spacing-left-1">
+                            <div class="h-spacing-left-1 ellipsis">
                                 <a href="{% url 'account' sound.user.username %}">{{ sound.user.username | truncate_string:15 }}</a>
                                 <p class="text-grey">{{ sound.created|date:"F jS, Y" }}</p>
                             </div>
@@ -111,7 +111,7 @@ <h1><a class="bw-link--black" href="{% url 'sound' sound.user.username sound.id
                                 {% endif %}
                             {% endif %}
                             {% if sound.pack_id %}
-                                <div class="text-grey">
+                                <div class="text-grey ellipsis">
                                    This sound is part of the pack <a href="{% url 'pack' username sound.pack.id %}">{{ sound.pack.name}}</a>
                                 </div>
                                 
@@ -195,7 +195,7 @@ <h6 class="text-26 no-margins ">Comments</h6>
                                     </div>
                                 {% endif %}
                             {% endif %}
-                            <div id="soundCommentsSection" class="v-spacing-top-5">
+                            <div id="soundCommentsSection" class="v-spacing-top-5 word-wrap-break-word">
                                 {% if page.object_list %}
                                     {% for comment in page.object_list %}
                                         <div>