From 70d2d33cbf1cdaa8300f422329aceb3a25c16995 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 7 Jan 2025 17:31:05 +0100
Subject: [PATCH] fix #57

---
 src/components/project/ProjectStep.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue
index e3c0542..4e62178 100644
--- a/src/components/project/ProjectStep.vue
+++ b/src/components/project/ProjectStep.vue
@@ -8,7 +8,9 @@
       <span :data-icon="step.id">{{ step.label }}</span>
     </h2>
     <div class="cards | flow">
-      <component :is="cardsMap[step.id]" :step="step" />
+      <div ref="card-node">
+        <component :is="cardsMap[step.id]" :step="step" />
+      </div>
     </div>
   </section>
 </template>
@@ -17,7 +19,7 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { usePageStore } from "../../stores/page";
-import { computed } from "vue";
+import { computed, onMounted, useTemplateRef } from "vue";
 import { useProjectStore } from "../../stores/project";
 import { useRouter } from "vue-router";
 import ClientBrief from "./cards/ClientBrief.vue";
@@ -46,6 +48,7 @@ dayjs.locale("fr");
 
 const { page } = usePageStore();
 const { setStatus } = useProjectStore();
+const cardNode = useTemplateRef("card-node");
 
 const steps = page.steps.map((item) => {
   return item.value;
@@ -60,6 +63,17 @@ const mergedFiles = computed(() => {
   return [...staticFiles, ...dynamicFiles];
 });
 
+// Hooks
+onMounted(() => {
+  if (step.id === page.content.currentstep) {
+    cardNode.value.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+    });
+  }
+});
+
+// Functions
 function getFrontView(track) {
   if (track.files.length === 1) return track.files[0];
   const xMax = parseInt(