Fix photos galley when too many thumbnails by adding a scroll-x

fixes #7942

closes #7943

Changelog.md

@@ -6,6 +6,7 @@
 
 ## Bug fixes
 * Do not autofollow back a user you are ignoring [#7913](https://github.com/diaspora/diaspora/pull/7913)
+* Fix photos gallery when too many thumbnails are shown [#7943](https://github.com/diaspora/diaspora/pull/7943)
 
 ## Features
 * Suppoert ignore users on mobile [#7884](https://github.com/diaspora/diaspora/pull/7884)

app/assets/javascripts/app/views/gallery_view.js

@@ -41,7 +41,7 @@ app.views.Gallery = app.views.Base.extend({
         if (image.naturalHeight > window.innerHeight && image.naturalHeight > image.naturalWidth * 2) {
           image.classList.add("too-tall");
         } else {
-          var margins = 95; // Margins are 80px for thumbnails height and 15px for top image margin
+          var margins = 110; // Margins are 80px for thumbnails height and 15px for top image margin + scroll-x height
           image.style = "max-height: " + (window.innerHeight - margins) + "px";
         }
       }

app/assets/stylesheets/gallery.scss

@@ -50,15 +50,17 @@ $margin: 15px;
 
   .indicator {
     bottom: 0;
+    overflow-x: auto;
+    white-space: nowrap;
 
     li {
       border: 0;
       border-radius: $thumbnail-size / 2;
       height: $thumbnail-size;
-      margin: 6px;
-      margin-bottom: $margin;
+      margin: $margin 6px;
       vertical-align: middle;
       width: $thumbnail-size;
+      background-size: cover;
 
       &.active,
       &:hover {