adapt incompleteEvents responsive

src/components/chart/ParticipationChart.module.css

@@ -3,7 +3,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: fit-content;
+  height: calc(100vh - 260px);
+  /* Exemple: calc(100vh - 60px) */
+  margin-bottom: auto;
 }
 
 .participationHeader {
@@ -14,6 +16,8 @@
 
 .partiText {
   display: flex;
+  width: 100%;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 2%;
@@ -29,6 +33,8 @@
 
 .chartContainer {
   max-width: 80%;
+  width: 400px;
+  height: auto;
   margin: 0 auto;
   position: relative;
   animation: slideEvent2 2s;
@@ -54,13 +60,27 @@
 }
 
 @keyframes slideEvent2 {
-  from { opacity: 0; transform: translateX(-20px); }
-  to { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideInEvent {
-  from { opacity: 0; transform: translateX(20px); }
-  to { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 .formControl {
@@ -83,7 +103,18 @@
   .partiText label {
     text-align: center;
   }
-  .leftBlock{
-    width:100%;
+
+  .leftBlock {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: fit-content;
+    margin-bottom: auto;
+    margin-top: 30px;
   }
-}
+  .chartContainer{
+    height:fit-content;
+  }
+
+}