diff --git a/swh/web/assets/src/bundles/browse/browse-utils.js b/swh/web/assets/src/bundles/browse/browse-utils.js
index 54e0030d..5e2aec74 100644
--- a/swh/web/assets/src/bundles/browse/browse-utils.js
+++ b/swh/web/assets/src/bundles/browse/browse-utils.js
@@ -1,76 +1,60 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 $(document).ready(() => {
 
   $('.dropdown-submenu a.dropdown-item').on('click', e => {
     $(e.target).next('div').toggle();
     if ($(e.target).next('div').css('display') !== 'none') {
       $(e.target).focus();
     } else {
       $(e.target).blur();
     }
     e.stopPropagation();
     e.preventDefault();
   });
 
-  // ensure branches/releases dropdowns are reparented to body to avoid
-  // overflow issues
-  $('#swh-branches-releases-dd').on('shown.bs.dropdown', function() {
-    $('body').append($('#swh-branches-releases-dd').css({
-      position: 'absolute',
-      left: $('#swh-branches-releases-dd').offset().left,
-      top: $('#swh-branches-releases-dd').offset().top
-    }).detach());
-    // ensure breadcrumbs stay at the same position
-    let bcOffsetLeft = $('#swh-branches-releases-dd').offset().left +
-        $('#swh-branches-releases-dd').width();
-    let bcOffsetTop = $('.swh-browse-bread-crumbs').offset().top;
-    $('.swh-browse-bread-crumbs').css('position', 'absolute');
-    $('.swh-browse-bread-crumbs').offset({'left': bcOffsetLeft, 'top': bcOffsetTop});
-  });
-
   $('.swh-metadata-toggler').popover({
     boundary: 'viewport',
     container: 'body',
     html: true,
     template: `<div class="popover" role="tooltip">
                    <div class="arrow"></div>
                    <h3 class="popover-header"></h3>
                    <div class="popover-body swh-metadata"></div>
                  </div>`,
     content: function() {
       var content = $(this).attr('data-popover-content');
       return $(content).children('.popover-body').html();
     },
     title: function() {
       var title = $(this).attr('data-popover-content');
       return $(title).children('.popover-heading').html();
     },
     offset: '50vh'
   });
 
   $('.swh-vault-menu a.dropdown-item').on('click', e => {
     $('.swh-metadata-toggler').popover('hide');
   });
 
   $('.swh-metadata-toggler').on('show.bs.popover', () => {
     $('.swh-vault-menu .dropdown-menu').hide();
   });
 
   $('.swh-actions-dropdown').on('hide.bs.dropdown', () => {
     $('.swh-vault-menu .dropdown-menu').hide();
     $('.swh-metadata-toggler').popover('hide');
   });
 
   $('body').on('click', e => {
     if ($(e.target).parents('.swh-metadata').length) {
       e.stopPropagation();
     }
   });
 
 });
diff --git a/swh/web/assets/src/bundles/browse/browse.css b/swh/web/assets/src/bundles/browse/browse.css
index 106ffc2a..0424c741 100644
--- a/swh/web/assets/src/bundles/browse/browse.css
+++ b/swh/web/assets/src/bundles/browse/browse.css
@@ -1,106 +1,106 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 
 
 .swh-browse-nav li a {
     border-radius: 4px;
 }
 
 .scrollable-menu {
     max-height: 180px;
     overflow-x: hidden;
 }
 
 .swh-corner-ribbon {
     width: 200px;
     background: #e43;
     position: absolute;
     text-align: center;
     line-height: 50px;
     letter-spacing: 1px;
     color: #f0f0f0;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
     top: 55px;
     right: -50px;
     left: auto;
     transform: rotate(45deg);
     z-index: 2000;
 }
 
 .swh-loading {
     display: none;
     text-align: center;
     margin-top: 10px;
 }
 
 .swh-loading.show {
     display: block;
 }
 
 .swh-metadata-table-row {
     border-top: 1px solid #ddd !important;
 }
 
 .swh-metadata-table-key {
     min-width: 200px;
     max-width: 200px;
     width: 200px;
 }
 
 .swh-metadata-table-value pre {
     white-space: pre-wrap;
 }
 
 .swh-table-even-odd th {
     border-top: none;
 }
 
 .swh-table-even-odd tr:nth-child(even) {
     background-color: #f5f5f5;
 }
 
 .swh-table-even-odd tr:nth-child(odd) {
     background-color: #fff;
 }
 
 .swh-table-cell-text-overflow {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .swh-directory-table {
     margin-bottom: 0;
 }
 
 .swh-directory-table td {
     border-top: 1px solid #ddd !important;
 }
 
 .swh-title-color {
     color: #e20026;
 }
 
 .swh-log-entry-message {
     min-width: 460px;
     max-width: 460px;
     width: 460px;
 }
 
 .swh-metadata {
     max-height: 50vh;
-    max-width: 41vw;
+    max-width: 80vw;
     overflow-y: auto;
     overflow-x: auto;
     padding: 0;
     padding-right: 1.4em;
 }
 
 .swh-search-pagination {
     margin-top: 5px;
 }
diff --git a/swh/web/assets/src/bundles/browse/content.css b/swh/web/assets/src/bundles/browse/content.css
index 46ee4e0e..ed621670 100644
--- a/swh/web/assets/src/bundles/browse/content.css
+++ b/swh/web/assets/src/bundles/browse/content.css
@@ -1,19 +1,20 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 .swh-content {
     background-image: none;
     border: none;
     background-color: white;
     padding: 0;
+    min-height: 200px;
 }
 
 .swh-content pre,
 .swh-content pre code {
     margin: 0;
     padding: 0;
 }
diff --git a/swh/web/assets/src/bundles/webapp/breadcrumbs.css b/swh/web/assets/src/bundles/webapp/breadcrumbs.css
index e9dbdb76..51e655b7 100644
--- a/swh/web/assets/src/bundles/webapp/breadcrumbs.css
+++ b/swh/web/assets/src/bundles/webapp/breadcrumbs.css
@@ -1,32 +1,32 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 .bread-crumbs {
     display: inline-block;
-    /* overflow: hidden; */
+    overflow: hidden;
     color: rgba(0, 0, 0, 0.55);
 }
 
 .bread-crumbs ul {
     list-style-type: none;
     height: 100%;
 }
 
 .bread-crumbs li {
     float: left;
     list-style-type: none;
 }
 
 .bread-crumbs a {
     color: rgba(0, 0, 0, 0.75);
     border-bottom-style: none;
 }
 
 .bread-crumbs a:hover {
     color: rgba(0, 0, 0, 0.85);
     text-decoration: underline;
 }
diff --git a/swh/web/assets/src/bundles/webapp/webapp.css b/swh/web/assets/src/bundles/webapp/webapp.css
index 71206385..87edc88f 100644
--- a/swh/web/assets/src/bundles/webapp/webapp.css
+++ b/swh/web/assets/src/bundles/webapp/webapp.css
@@ -1,331 +1,350 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 html {
     height: 100%;
     overflow-x: hidden;
 }
 
 body {
     min-height: 100%;
     margin: 0;
     position: relative;
     padding-bottom: 120px;
 }
 
 a {
     border-bottom-style: none;
     outline: none;
 }
 
 code {
     background-color: #f9f2f4;
 }
 
 pre code {
     background-color: transparent;
 }
 
 footer {
     background-color: #262626;
     color: #fff;
     font-size: 0.8rem;
     position: absolute;
     bottom: 0;
     width: 100%;
     padding-top: 20px;
     padding-bottom: 20px;
 }
 
 footer a,
 footer a:visited {
     color: #fecd1b;
 }
 
 footer a:hover {
     text-decoration: underline;
 }
 
 pre {
     background-color: #f5f5f5;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 9.5px;
     font-size: 0.8rem;
 }
 
 .btn.active {
     background-color: #e7e7e7;
 }
 
 .card {
     margin-bottom: 5px !important;
     overflow-x: auto;
 }
 
 .navbar-brand {
     padding: 5px;
     margin-right: 0;
 }
 
 .table {
     margin-bottom: 0;
 }
 
 .swh-web-app-link a {
     text-decoration: none;
     outline: none;
     border: none;
 }
 
 .swh-web-app-link:hover {
     background-color: #efeff2;
 }
 
 .table > thead > tr > th {
     border-top: none;
     border-bottom: 1px solid #e20026;
 }
 
 .table > tbody > tr > td {
     border-style: none;
 }
 
 .sitename .first-word,
 .sitename .second-word {
     color: rgba(0, 0, 0, 0.75);
     font-weight: normal;
     font-size: 1.2rem;
 }
 
 .sitename .first-word {
     font-family: 'Alegreya Sans', sans-serif;
 }
 
 .sitename .second-word {
     font-family: 'Alegreya', serif;
 }
 
 .swh-api-doc-route-upcoming > td,
 .swh-api-doc-route-upcoming > td > a {
     font-size: 90%;
 }
 
 .swh-api-doc-route-deprecated > td,
 .swh-api-doc-route-deprecated > td > a {
     color: red;
 }
 
 .swh-api-doc p {
     margin-bottom: 0;
 }
 
 .swh-api-doc dt {
     text-align: right;
 }
 
 .swh-counter {
     font-size: 150%;
 }
 
 .swh-http-error {
     margin: 0 auto;
     text-align: center;
 }
 
 .swh-http-error-head {
     color: #2d353c;
     font-size: 30px;
 }
 
 .swh-http-error-code {
     bottom: 60%;
     color: #2d353c;
     font-size: 96px;
     line-height: 80px;
     margin-bottom: 10px !important;
 }
 
 .swh-http-error-desc {
     font-size: 12px;
     color: #647788;
     text-align: center;
 }
 
 .swh-http-error-desc pre {
     display: inline-block;
     text-align: left;
     max-width: 800px;
     white-space: pre-wrap;
 }
 
 .popover {
     max-width: 100%;
 }
 
 .modal {
     text-align: center;
     padding: 0 !important;
 }
 
 .modal::before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     margin-right: -4px;
 }
 
 .modal-dialog {
     display: inline-block;
     text-align: left;
     vertical-align: middle;
 }
 
 .dropdown-submenu {
     position: relative;
 }
 
 .dropdown-submenu .dropdown-menu {
     top: 0;
     left: -100%;
     margin-top: -5px;
     margin-left: -2px;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
 a.dropdown-left::before {
     content: "\f0d9";
     font-family: 'FontAwesome';
     display: block;
     width: 20px;
     height: 20px;
     float: left;
     margin-left: 0;
 }
 
 #swh-navbar {
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
     border-bottom: 5px solid;
     border-image: linear-gradient(to right, rgb(226, 0, 38) 0%, rgb(254, 205, 27) 100%) 1 1 1 1;
     width: 100%;
     padding: 5px;
     margin-bottom: 20px;
     margin-top: 30px;
+    justify-content: normal;
+    flex-wrap: nowrap;
 }
 
 #back-to-top {
     display: initial;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 10;
 }
 
 #back-to-top a img {
     display: block;
     width: 32px;
     height: 32px;
     background-size: 32px 32px;
     text-indent: -999px;
     overflow: hidden;
 }
 
 .swh-top-bar {
     direction: ltr;
     height: 30px;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    min-width: 600px;
     z-index: 99999;
     background-color: #262626;
     color: #fff;
     text-align: center;
     font-size: 14px;
 }
 
 .swh-top-bar ul {
     margin-top: 4px;
-    margin-left: 28px;
+    padding-left: 0;
+    white-space: nowrap;
 }
 
 .swh-top-bar li {
-    display: inline;
+    display: inline-block;
     margin-left: 10px;
     margin-right: 10px;
 }
 
 .swh-top-bar a,
 .swh-top-bar a:visited {
     color: #fecd1b;
 }
 
 .swh-top-bar a.swh-current-site,
 .swh-top-bar a.swh-current-site:visited {
     color: #e20026;
 }
 
+.swh-donate-item {
+    position: absolute;
+    right: 0;
+}
+
 .swh-donate-link {
     border: 1px solid #fecd1b;
     background-color: #e20026;
     color: white !important;
     padding: 3px;
     border-radius: 3px;
 }
 
 .swh-navbar-content h4 {
     padding-top: 7px;
 }
 
 .swh-navbar-content .bread-crumbs {
     display: block;
     margin-left: -40px;
 }
 
 .swh-navbar-content .bread-crumbs li.bc-no-root {
     padding-top: 7px;
 }
 
 .main-sidebar {
     margin-top: 30px;
 }
 
 .content-wrapper {
     background: none;
 }
 
 .brand-image {
     max-height: 40px;
 }
 
 .brand-link {
     padding-top: 18.5px;
     padding-bottom: 18px;
     padding-left: 4px;
     border-bottom: 5px solid #e20026 !important;
 }
 
 .navbar-header a,
 ul.dropdown-menu a,
 ul.navbar-nav a,
 ul.nav-sidebar a {
     border-bottom-style: none;
     color: #323232;
 }
 
 .swh-sidebar .nav-link.active {
     color: #323232 !important;
     background-color: #e7e7e7 !important;
+}
+
+.swh-image-error {
+    width: 80px;
+    height: auto;
+}
+
+@media (max-width: 600px) {
+    .swh-image-error {
+        width: 40px;
+        height: auto;
+    }
 }
\ No newline at end of file
diff --git a/swh/web/templates/error.html b/swh/web/templates/error.html
index 79aebe63..a9b0b03c 100644
--- a/swh/web/templates/error.html
+++ b/swh/web/templates/error.html
@@ -1,43 +1,43 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load static %}
 
 {% block title %}Error {{ error_code }} &ndash; Software Heritage archive {% endblock %}
 
 {% block navbar-content %}
 <h4>Error</h4>
 {% endblock %}
 
 {% block content %}
 <div class="swh-http-error">
   <div class="swh-http-error-head">Error</div>
   <div class="swh-http-error-code">
-    <img class="hidden-xs" src="{% static 'img/swh-logo.svg' %}" style="width:80px; height:auto;"/>
+    <img class="hidden-xs swh-image-error" src="{% static 'img/swh-logo.svg' %}">
     {{ error_code }}
-    <img class="hidden-xs" src="{% static 'img/swh-logo.svg' %}" style="width:80px; height:auto;"/>
+    <img class="hidden-xs swh-image-error" src="{% static 'img/swh-logo.svg' %}">
   </div>
   <h3>{{ error_message }}</h3>
 
   <div class="swh-http-error-desc">
     <pre>{{ error_description }}</pre>
     <div>
       <a class="btn" onclick="window.history.back();">
         <i class="fa fa-arrow-left"></i>
         Go back to previous page
       </a>
       or
       <a class="btn" href="{% url 'swh-web-homepage' %}">
         <i class="fa fa-arrow-left"></i>
         Go back to homepage
       </a>
     </div>
   </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
index c849e298..08936bf2 100644
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -1,139 +1,139 @@
 {% comment %}
 Copyright (C) 2015-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 <!DOCTYPE html>
 
 {% load static %}
 {% load render_bundle from webpack_loader %}
 
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>{% block title %}{% endblock %}</title>
 
     {% render_bundle 'vendors' %}
     {% render_bundle 'webapp' %}
 
     <script src="{% url 'js_reverse' %}" type="text/javascript"></script>
 
     {% block header %}{% endblock %}
 
     <link rel="icon" href="{% static 'img/icons/swh-logo-32x32.png' %}" sizes="32x32" />
     <link rel="icon" href="{% static 'img/icons/swh-logo-archive-192x192.png' %}" sizes="192x192" />
     <link rel="apple-touch-icon-precomposed" href="{% static 'img/icons/swh-logo-archive-180x180.png' %}" />
     <meta name="msapplication-TileImage" content="{% static 'img/icons/swh-logo-archive-270x270.png' %}" />
   </head>
 
   <body class="hold-transition sidebar-mini">
     <div class="wrapper">
       <a id="top"></a>
       <div class="swh-top-bar">
         <ul>
           <li>
             <a href="https://www.softwareheritage.org">Project</a>
           </li>
           <li>
               <a class="swh-current-site" href="https://archive.softwareheritage.org">Archive</a>
           </li>
           <li>
               <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
           </li>
-          <li class="float-right">
+          <li class="swh-donate-item">
             <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
           </li>
         </ul>
       </div>
       <nav class="main-header navbar navbar-expand-lg navbar-light navbar-static-top" id="swh-navbar">
         <div class="navbar-header">
           <a class="nav-link swh-push-menu" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
         </div>
         <div class="navbar">
           <div class="swh-navbar-content">
             {% block navbar-content %}{% endblock %}
           </div>
         </div>
       </nav>
     </div>
 
     <aside class="swh-sidebar main-sidebar sidebar-light-primary elevation-4">
       <a href="{% url 'swh-web-homepage' %}" class="brand-link">
         <img class="brand-image" src="{% static 'img/swh-logo-archive.png' %}" alt="SWH Logo">
         <div class="brand-text sitename" href="{% url 'swh-web-homepage' %}">
           <span class="first-word">Software</span> <span class="second-word">Heritage</span>
         </div>
       </a>
 
       <div class="sidebar">
         <nav class="mt-2">
           <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
             <li class="nav-header">Archive Access</li>
             <li class="nav-item swh-api-item" title="Query the archive programmatically using a RESTful API">
               <a href="{% url 'api-homepage' %}" class="nav-link swh-api-link">
                 <img class="nav-icon" src="{% static 'img/swh-api.png' %}"/>
                 <p>Web API</p>
               </a>
             </li>
             <li class="nav-item swh-browse-item" title="Explore the archive using a dedicated web interface">
               <a href="{% url 'browse-mainpage' %}" class="nav-link swh-browse-link">
                 <img class="nav-icon" src="{% static 'img/swh-browse.png' %}"/>
                 <p>Browse</p>
               </a>
             </li>
             <li class="nav-header">Features</li>
             <li class="nav-item swh-search-item" title="Search software origins to browse">
               <a href="{% url 'browse-search' %}" class="nav-link swh-search-link">
                 <i style="color: #e20026;" class="nav-icon fa fa-search"></i>
                 <p>Search</p>
               </a>
             </li>
             <li class="nav-item swh-vault-item" title="Download archive content from the Vault">
               <a href="{% url 'browse-vault' %}" class="nav-link swh-vault-link">
                 <img class="nav-icon" src="{% static 'img/swh-vault.png' %}"/>
                 <p>Vault</p>
               </a>
             </li>
             <li class="nav-header">Miscellaneous</li>
             <li class="nav-item swh-help-item" title="How to browse the archive ?">
               <a href="{% url 'browse-help' %}" class="nav-link swh-help-link">
                 <i style="color: #e20026;" class="nav-icon fa fa-question"></i>
                 <p>Help</p>
               </a>
             </li>
           </ul>
         </nav>
       </div>
     </aside>
 
     <div class="content-wrapper">
       <section class="content">
         <div class="container">
           {% block content %}{% endblock %}
         </div>
       </section>
     </div>
 
     <footer class="footer">
       <div class="container text-center">
         <a href="https://www.softwareheritage.org">Software Heritage</a> &mdash;
         Copyright (C) 2015&ndash;{% now "Y" %}, The Software Heritage developers.
         License: <a href="https://www.gnu.org/licenses/agpl.html">GNU
         AGPLv3+</a>. <br /> The source code of Software Heritage <em>itself</em>
         is available on
         our <a href="https://forge.softwareheritage.org/">development
         forge</a>. <br /> The source code files <em>archived</em> by Software
         Heritage are available under their own copyright and licenses. <br />
         <a href="https://www.softwareheritage.org/software-heritage-api-terms-of-use/">Terms of use</a> -
         <a href="https://www.softwareheritage.org/contact/">Contact</a>.
       </div>
     </footer>
     <div id="back-to-top">
       <a href="#top"><img alt="back to top" src="{% static 'img/arrow-up-small.png' %}" /></a>
     </div>
   </body>
 </html>