wrap swh object metadata in HTML pre tag for a better display of textual...

wrap swh object metadata in HTML pre tag for a better display of textual content in browse web application

swh/web/static/css/style.css

@@ -321,6 +321,10 @@ bread-crumbs ul {
     border-color: transparent;
 }
 
+.swh-metadata-table-row pre {
+    background-color: #f5f5f5;
+}
+
 .hljs {
     background-color: transparent;
     white-space: pre;

swh/web/templates/browse.html

@@ -30,7 +30,9 @@
             {% for key, val in swh_object_metadata.items|dictsort:"0.lower" %}  
               <tr>
                 <th class="swh-metadata-table-row">{{ key }}</th>
-                <td class="swh-metadata-table-row">{{ val | safe | urlize_links_and_mails | safe }}</td>
+                <td class="swh-metadata-table-row">
+                  <pre>{{ val | safe | urlize_links_and_mails | safe }}</pre>
+                </td>
               </tr>
             {% endfor %}
           </tbody>

swh/web/templates/revision.html

@@ -17,7 +17,7 @@
   {% for key, val in revision.items|dictsort:"0.lower" %}
     <tr>
       <th class="swh-metadata-table-row">{{ key }}</th>
-      <td class="swh-metadata-table-row">{{ val }}</td>
+      <td class="swh-metadata-table-row"><pre>{{ val }}</pre></td>
     </tr>
   {% endfor %}
 </table>