From 6bb2d32f8c63435ebf9d4ac5861c28e458b92177 Mon Sep 17 00:00:00 2001
From: jochen <jschoubben@gmail.com>
Date: Sat, 18 May 2024 15:19:52 +0200
Subject: [PATCH] Hide photo-slider navigation buttons on mobile

---
 .../components/photo-viewer/photo-viewer.js   |  2 +-
 .../components/photo-viewer/photo-viewer.scss | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/components/photo-viewer/photo-viewer.js b/client/src/components/photo-viewer/photo-viewer.js
index 2fad980..4027f53 100644
--- a/client/src/components/photo-viewer/photo-viewer.js
+++ b/client/src/components/photo-viewer/photo-viewer.js
@@ -129,7 +129,7 @@ export function PhotoViewer() {
                 </div>
 
                 <div className="close-btn" onClick={handleClose}>
-                    {hasNext && <Close/>}
+                    <Close/>
                 </div>
             </div> : null}
     </>
diff --git a/client/src/components/photo-viewer/photo-viewer.scss b/client/src/components/photo-viewer/photo-viewer.scss
index 26a5b8f..f90082e 100644
--- a/client/src/components/photo-viewer/photo-viewer.scss
+++ b/client/src/components/photo-viewer/photo-viewer.scss
@@ -18,6 +18,7 @@
     overflow: hidden;
     flex-shrink: 1;
     max-height: 90vh;
+    margin: 0 10px;
 
     .photo {
       position: relative;
@@ -29,6 +30,9 @@
         @media (max-width: 768px) {
           max-width: calc(100vw - 150px);
         }
+        @media (max-width: 520px) {
+          max-width: calc(100vw - 20px);
+        }
       }
 
       &.photo--placeholder {
@@ -49,22 +53,19 @@
 
     svg {
       color: white;
-      opacity: 0.15;
-      width: 75px;
-      height: 75px;
-
-      @media (max-width: 768px) {
-        width: 75px;
-        height: 75px;
-      }
+      opacity: 0.5;
+      font-size: 48px;
     }
-
   }
 
   .goto-btn {
     cursor: pointer;
     flex: 1;
 
+    @media (max-width: 520px) {
+      display: none;
+    }
+
     &:hover {
       svg {
         transform: scale(1.2);