Add word-wrap:break-word to various elements

static/common.css

@@ -52,7 +52,7 @@ li
 .remove_tag_button,
 .remove_tag_button_perm
 {
-    position: absolute;
+    /*position: absolute;*/
     top: 3px;
     width:  18px;
     height: 14px;
@@ -202,10 +202,11 @@ li
     align-items: center;
     flex: 2;
 }
-.message_positive, .message_negative
+.message_bubble
 {
     width: 80%;
     margin: 4px;
+    word-wrap: break-word;
 }
 .message_positive
 {

static/common.js

@@ -5,7 +5,7 @@ function create_message_bubble(message_area, message_positivity, message_text, l
         lifespan = 8000;
     }
     var message = document.createElement("div");
-    message.className = message_positivity;
+    message.className = "message_bubble " + message_positivity;
     var span = document.createElement("span");
     span.innerHTML = message_text;
     message.appendChild(span);

templates/photo.html

@@ -62,6 +62,7 @@
 #editor_area
 {
     flex: 3;
+    word-wrap: break-word;
 }
 #message_area
 {
@@ -126,8 +127,11 @@
             {% set tags = photo.sorted_tags() %}
             {% for tag in tags %}
             <li>
-                <a class="tag_object" href="/search?tag_musts={{tag.name}}">{{tag.qualified_name()}}</a>
-                <button class="remove_tag_button" onclick="remove_photo_tag('{{photo.id}}', '{{tag.name}}', receive_callback);"></button>
+                <a class="tag_object" href="/search?tag_musts={{tag.name}}">{{tag.qualified_name()}}</a><!-- 
+                --><button
+                class="remove_tag_button"
+                onclick="remove_photo_tag('{{photo.id}}', '{{tag.name}}', receive_callback);">
+                </button>
             </li>
             {% endfor %}
             <li>

templates/search.html

@@ -43,6 +43,7 @@ form
     min-width: 300px;
     padding: 8px;
     flex: 1;
+    word-wrap: break-word;
 }
 #right
 {