update

src/assets/main.css

@@ -38,6 +38,7 @@
 
 .vue-recycle-scroller__item-wrapper {
   width: 100%;
+  height: 59vw;
   display: flex;
   flex-flow: wrap;
 }

src/components/MyPhoto.vue

@@ -396,8 +396,8 @@ markers.value = [
 
 .image-container {
   width: 38vw;
-  height: 56vw;
+  height: 59vw;
-  top: 2.2vw;
+  top: 0;
   margin-bottom: 3vw;
   background-image: url('../assets/images/test.webp');
   background-size: cover;

src/components/PhotoSquare.vue

@@ -364,10 +364,10 @@ markers.value = [
 }
 .image-wrapper {
   position: relative;
-  margin-bottom: -10vw;
-  float: left;
   margin-right: 2vw;
   margin-left: 2vw;
+  width: 38vw;
+  height: 59vw;
 }
 .border-image {
   position: absolute;
@@ -377,11 +377,15 @@ markers.value = [
 }
 .image-gallery {
   overflow-y: auto;
+  overflow-x: hidden;
   display: block;
   width: 84vw;
   height: 57vh;
-  position: absolute;
+  position: relative;
-  top: 28%;
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  top: 10vw;
 }
 
 .image-container {

src/components/SelectTemplateV2.vue

@@ -118,11 +118,11 @@ const handleNavClick = (event) => {
 
 .nav-container {
   position: relative;
-  pointer-events: none;
+  top: 18vw;
 }
 
 .nav-image-wrapper {
-  top: 24vw;
+  top: 0;
   opacity: 0;
   position: relative;
   display: inline-block;