From fc8bda1667fd07c171a3cee322b743143f15ea6a Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 21 Nov 2024 19:11:16 +0100
Subject: [PATCH] Fix project steps layout

---
 src/components/project/Project.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/project/Project.vue b/src/components/project/Project.vue
index 809e5f1..3c3a42e 100644
--- a/src/components/project/Project.vue
+++ b/src/components/project/Project.vue
@@ -45,11 +45,12 @@ const { stepsLabels, setStatus } = useProjectStore();
 <style scoped>
 .project-item {
   background: var(--color-background);
+  row-gap: 2.5rem;
 }
 
 .project-item hgroup {
   flex: 1 1 0%;
-  min-width: 15rem;
+  min-width: 20rem;
 }
 .project-item h3 {
   font-family: var(--font-serif);
@@ -74,12 +75,14 @@ const { stepsLabels, setStatus } = useProjectStore();
 .project-steps {
   --color: var(--color-primary-100);
   --gap: var(--space-16);
-  flex: 0 1 0%;
+  flex: 1 1 0%;
   display: flex;
   gap: var(--gap);
   margin-top: -2.75rem;
   position: relative;
   min-width: max(55%, 45rem);
+  width: 100%;
+  padding: 2rem 0;
 }
 
 .project-step {
@@ -184,6 +187,7 @@ const { stepsLabels, setStatus } = useProjectStore();
   --background: transparent;
   color: transparent;
 }
+
 .project-step[data-status="done"] .pill::after {
   mask-image: var(--icon-check-3);
 }