From 3f700c3960e540fd24a332504b876c9ba4bee877 Mon Sep 17 00:00:00 2001
From: flaburgan <flaburgan@geexxx.fr>
Date: Wed, 5 Dec 2018 00:10:11 +0100
Subject: [PATCH] Fix photos galley when too many thumbnails by adding a
 scroll-x

fixes #7942

closes #7943
---
 Changelog.md                                     | 1 +
 app/assets/javascripts/app/views/gallery_view.js | 2 +-
 app/assets/stylesheets/gallery.scss              | 6 ++++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/Changelog.md b/Changelog.md
index b8eb2b175..856d6e439 100644
--- a/Changelog.md
+++ b/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)
diff --git a/app/assets/javascripts/app/views/gallery_view.js b/app/assets/javascripts/app/views/gallery_view.js
index 73a8a70c1..badf0c02d 100644
--- a/app/assets/javascripts/app/views/gallery_view.js
+++ b/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";
         }
       }
diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss
index 3966bea20..67a1a467c 100644
--- a/app/assets/stylesheets/gallery.scss
+++ b/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 {