Properly wrap message elements

core/templates/base.html

@@ -38,36 +38,12 @@
     </script>
     <style>
       .icon { border-bottom: 0px !important;}
-
-.navbar-item.is-hoverable:hover .navbar-dropdown .navbar-dropdown {
-  display: none;
-}
-
-.navbar-dropdown .navbar-item.is-hoverable:hover > .navbar-dropdown {
-  display: block;
-}
-.navbar-dropdown .navbar-item .navbar-dropdown {
-  top: -10px;
-  margin-left: 100%;
-  box-shadow: 0 16px 8px -8px rgba(10,10,10,.1), 8px 0 8px -8px rgba(10,10,10,.1);
-}
-
-.navbar-dropdown .navbar-item.has-dropdown {
-  padding: 0;
-}
-
-.navbar-dropdown .navbar-item.has-dropdown > .navbar-link {
-  width: 100%;
-  padding: .375rem 1rem;
-  background-color: #fff;
-}
-
-.navbar-dropdown .navbar-item.has-dropdown:hover > .navbar-link {
-  background-color: #f5f5f5;
-}
-
-.navbar-dropdown .navbar-item.has-dropdown > .navbar-link:not(.is-arrowless) {
-  padding-right: 2.5em;
+      .wrap {
+        white-space: pre-wrap;      /* CSS3 */
+        white-space: -moz-pre-wrap; /* Firefox */
+        white-space: -pre-wrap;     /* Opera <7 */
+        white-space: -o-pre-wrap;   /* Opera 7 */
+        word-wrap: break-word;      /* IE */
       }
     </style>
   </head>

core/templates/ui/drilldown/results.html

@@ -89,7 +89,7 @@
                 <p>{{ item.date }}</p>
                 <p>{{ item.time }}</p>
               </td>
-              <td style="max-width: 10em">{{ item.msg }}</td>
+              <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
               <td>{{ item.host }}</td>
               <td>
                 {% if item.online is True %}