correction graphique box EventList

src/pages/Home/components/EventList/eventItem.jsx

@@ -1,12 +1,13 @@
 import styles from "./eventList.module.css";
-import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
-import { useState } from "react";
+import {formatDateLetter} from "../../../../utils/date/formatDateLetter.js";
+import {useState} from "react";
 
-export default function EventItem({ eventGroup }) {
+export default function EventItem({eventGroup}) {
 
     const [isVisible, setIsVisible] = useState(false);
 
-    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
+    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}
+                onClick={() => setIsVisible(!isVisible)}>
         <div className={styles.eventTitle}>
             <p className={styles.title}>{eventGroup.name}</p>
             <p>{formatDateLetter(eventGroup.start)}</p>
@@ -15,8 +16,8 @@ export default function EventItem({ eventGroup }) {
             <ul className={styles.eventDetails}>
                 {eventGroup.tasks.map((task, i) => (
                     <li key={i} className={styles.eventTasks}>
-                        <p>- {task.name} - {task.description}</p>
-                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                        <p className={styles.taskName}>{task.name} - {task.description}</p>
+                        <p className={styles.taskDate}>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
                     </li>
                 ))}
             </ul>

src/pages/Home/components/EventList/eventList.module.css

@@ -68,9 +68,12 @@ h2{
 }
 
 .eventTasks {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    list-style: none;
+    margin: 10px;
+}
+
+.taskDate{
+    font-size: 13px;
 }
 
 @media (max-width: 768px) {