diff --git a/swh/web/assets/src/bundles/browse/browse-utils.js b/swh/web/assets/src/bundles/browse/browse-utils.js
index e720b1666c97174b04123bddab47e915719ad14a..d7be7839b1f71f098d96d03f2e35aea2ee4c5e3d 100644
--- a/swh/web/assets/src/bundles/browse/browse-utils.js
+++ b/swh/web/assets/src/bundles/browse/browse-utils.js
@@ -22,6 +22,14 @@ $(document).ready(() => {
     boundary: 'viewport',
     container: 'body',
     html: true,
+    placement: function() {
+      const width = $(window).width();
+      if (width < 768) {
+        return 'top';
+      } else {
+        return 'right';
+      }
+    },
     template: `<div class="popover" role="tooltip">
                  <div class="arrow"></div>
                  <h3 class="popover-header"></h3>
diff --git a/swh/web/assets/src/bundles/browse/browse.css b/swh/web/assets/src/bundles/browse/browse.css
index bc8b623e14f710390392e2d20226bc2e77d42a38..5ee06ff4113cbd0cc7e26dd8458b819630f45355 100644
--- a/swh/web/assets/src/bundles/browse/browse.css
+++ b/swh/web/assets/src/bundles/browse/browse.css
@@ -80,13 +80,18 @@
 
 .swh-popover {
     max-height: 50vh;
-    max-width: 80vw;
     overflow-y: auto;
     overflow-x: auto;
     padding: 0;
     padding-right: 1.4em;
 }
 
+@media screen and (min-width: 768px) {
+    .swh-popover {
+        max-width: 80vh;
+    }
+}
+
 .swh-search-pagination {
     margin-top: 5px;
 }
diff --git a/swh/web/assets/src/bundles/webapp/webapp.css b/swh/web/assets/src/bundles/webapp/webapp.css
index de7170cc166267f443f1ec602b1c79a05d758556..76cf4a686dbe11d6c8643ec0c02156aee98fdce7 100644
--- a/swh/web/assets/src/bundles/webapp/webapp.css
+++ b/swh/web/assets/src/bundles/webapp/webapp.css
@@ -168,8 +168,8 @@ pre {
 }
 
 .popover {
-    max-width: 100%;
-    z-index: 2000;
+    max-width: 97%;
+    z-index: 40000;
 }
 
 .modal {