swh-web: Fix display issues in mobile browsers

swh/web/assets/src/bundles/browse/browse-utils.js

@@ -18,22 +18,6 @@ $(document).ready(() => {
     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',

swh/web/assets/src/bundles/browse/browse.css

@@ -94,7 +94,7 @@
 
 .swh-metadata {
     max-height: 50vh;
-    max-width: 41vw;
+    max-width: 80vw;
     overflow-y: auto;
     overflow-x: auto;
     padding: 0;

swh/web/assets/src/bundles/browse/content.css

@@ -10,6 +10,7 @@
     border: none;
     background-color: white;
     padding: 0;
+    min-height: 200px;
 }
 
 .swh-content pre,

swh/web/assets/src/bundles/webapp/breadcrumbs.css

@@ -7,7 +7,7 @@
 
 .bread-crumbs {
     display: inline-block;
-    /* overflow: hidden; */
+    overflow: hidden;
     color: rgba(0, 0, 0, 0.55);
 }
 

swh/web/assets/src/bundles/webapp/webapp.css

@@ -222,6 +222,8 @@ a.dropdown-left::before {
     padding: 5px;
     margin-bottom: 20px;
     margin-top: 30px;
+    justify-content: normal;
+    flex-wrap: nowrap;
 }
 
 #back-to-top {
@@ -248,7 +250,6 @@ a.dropdown-left::before {
     top: 0;
     left: 0;
     width: 100%;
-    min-width: 600px;
     z-index: 99999;
     background-color: #262626;
     color: #fff;
@@ -258,11 +259,12 @@ a.dropdown-left::before {
 
 .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;
 }
@@ -277,6 +279,11 @@ a.dropdown-left::before {
     color: #e20026;
 }
 
+.swh-donate-item {
+    position: absolute;
+    right: 0;
+}
+
 .swh-donate-link {
     border: 1px solid #fecd1b;
     background-color: #e20026;
@@ -328,4 +335,16 @@ ul.nav-sidebar a {
 .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

swh/web/templates/error.html

@@ -19,9 +19,9 @@ See top-level LICENSE file for more information
 <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>
 

swh/web/templates/layout.html

@@ -44,7 +44,7 @@ See top-level LICENSE file for more information
           <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>