mobile view

camp/static/css/site.scss

@@ -22,11 +22,13 @@
       height: calc(100vh - 180px);
   }
   @media screen and (max-width: 39.9375em) {
-      .photo-container .image {
-          height: auto;
-          width: 100%;
-      }
-
+    &:open {
+      overflow: auto;
+    }
+    .photo-container .image {
+        height: auto;
+        width: 100%;
+    }
   }
   .main-image {
       width: 100%;
@@ -45,6 +47,11 @@
     margin-top: 10px;
     overflow: auto;
   }
+  @media screen and (max-width: 39.9375em) {
+    .thumbnails {
+      flex-wrap: wrap;
+    }
+  }
   .thumbnail {
     width: 80px;
     height: 60px;

camp/static/js/gallery.js

@@ -142,7 +142,11 @@ function loadGallery(images, idx, main, thumbnails) {
             gallery.querySelectorAll(".thumbnail").forEach((thumb, i) => {
                 thumb.classList.toggle("active", i === index);
             });
-            gallery.querySelector('.active').scrollIntoView()
+            if document.querySelector(".thumbnail").parentElement
+
+            if (thumbnailsContainer && thumbnailsContainer(thumbnailsContainer).flexWrap == "nowrap") {
+                gallery.querySelector('.active').scrollIntoView()
+            }
         }
         if (images[index].orig) {
             download.href = images[index].orig