make thumbnails scrollable

frontend/src/static/js/components/media-page/MediaPage.scss

@@ -553,9 +553,7 @@
   max-width: 90%;
 }
 
-.slideshow-image{
+
-  position: relative;
-}
 
 .slideshow-image img {
   display: block;
@@ -612,33 +610,54 @@
   right: 10px;
 }
 
-.dots {
+.thumbnail-navigation {
-  position: fixed; /* Make the dots container fixed to always be under the image */
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 10px;
   bottom: 10%;
   left: 50%;
   transform: translateX(-50%);
+}
+
+.thumbnail-container {
   display: flex;
   gap: 10px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  max-width: 80%;
+  padding: 10px 0;
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
+}
+
+.thumbnail-container.center-thumbnails {
+  display: flex;
   justify-content: center;
-  z-index: 1000;
+  overflow: visible; /* No scrollbars for fewer thumbnails */
+}
+
+.thumbnail-container::-webkit-scrollbar {
+  display: none; /* Hide scrollbar for Chrome/Safari */
 }
 
 .thumbnail {
-  width: 50px;  
+  width: 60px;
-  height: 50px;
+  height: 60px;
   object-fit: cover;
   border: 2px solid transparent;
   border-radius: 5px;
   cursor: pointer;
-  transition: all 0.3s ease-in-out;
+  transition: transform 0.3s ease;
 }
 
 .thumbnail.active {
-  border-color: rgba(255, 255, 255, 1); 
+  border-color: white;
 }
 
 .thumbnail:hover {
-  opacity: 0.8;  
+  transform: scale(1.1);
 }
 
 .viewer-container .player-container {

frontend/src/static/js/components/media-viewer/ImageViewer.js

@@ -18,6 +18,8 @@ export default function ImageViewer() {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isImgLoading, setIsImgLoading] = useState(true);
 
+  const thumbnailRef = React.useRef();
+
   function onImageLoad() {
     setImage(getImageUrl());
   }
@@ -91,6 +93,17 @@ export default function ImageViewer() {
     window.location.href = mediaPageUrl;
   };
 
+  const scrollThumbnails = (direction) => {
+    if (thumbnailRef.current) {
+      const scrollAmount = 10;
+      if (direction === 'left') {
+        thumbnailRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+      } else if (direction === 'right') {
+        thumbnailRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+      }
+    }
+  };
+
   return !image ? null : (
     <div className="viewer-image-container">
       <Tooltip content={'load full-image'} position="center">
@@ -121,7 +134,16 @@ export default function ImageViewer() {
                 &#8250;
               </button>
             )}
-            <div className="dots">
+            <div className="thumbnail-navigation">
+              {slideshowItems.length > 5 && (
+                <button className="arrow left" onClick={() => scrollThumbnails('left')} aria-label="Scroll left">
+                  &#8249;
+                </button>
+              )}
+              <div
+                className={`thumbnail-container ${slideshowItems.length <= 5 ? 'center-thumbnails' : ''}`}
+                ref={thumbnailRef}
+              >
                 {slideshowItems.map((item, index) => (
                   <img
                     key={index}
@@ -132,6 +154,12 @@ export default function ImageViewer() {
                   />
                 ))}
               </div>
+              {slideshowItems.length > 5 && (
+                <button className="arrow right" onClick={() => scrollThumbnails('right')} aria-label="Scroll right">
+                  &#8250;
+                </button>
+              )}
+            </div>
           </div>
         </div>
       )}