Hide photo-slider navigation buttons on mobile

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}
     </>

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;
+      opacity: 0.5;
-      width: 75px;
+      font-size: 48px;
-      height: 75px;
-
-      @media (max-width: 768px) {
-        width: 75px;
-        height: 75px;
-      }
     }
-
   }
 
   .goto-btn {
     cursor: pointer;
     flex: 1;
 
+    @media (max-width: 520px) {
+      display: none;
+    }
+
     &:hover {
       svg {
         transform: scale(1.2);