front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -2,7 +2,7 @@
   <div :class="['cell', { expanded }]" @click="handleClick">
     <h3>{{ title_text }}</h3>
 
-    <div v-for="(desc, index) in currentDescriptions" :key="index">
+    <div class="section-bloc" v-for="(desc, index) in currentDescriptions" :key="index">
       <!-- Mode affichage -->
       <template v-if="!isEditing[index]">
         <div class="description">
@@ -21,7 +21,7 @@
           <button @click.stop="cancelEdit(index)" class="cancel-button">Annuler</button>
         </div>
       </template>
-</div>
+    </div>
 
   </div>
 </template>
@@ -87,7 +87,7 @@ const fetchData = async (projectId: number, title: number, date: string, useMock
 
     if (responseData.length > 0) {
       currentDescriptions.value = responseData.map((item) => item.txt);
-      editedDescriptions.value = [...currentDescriptions.value]; // Copie initiale
+      editedDescriptions.value = [...currentDescriptions.value];
       isEditing.value = Array(responseData.length).fill(false);
     } else {
       console.warn("Aucune donnée reçue.");
@@ -211,8 +211,8 @@ const cancelEdit = (index: number) => {
   color: #666;
 }
 
-.cell .description {
-  width: 800px;
+.cell {
+  width: 100%;
   height: 100px;
   overflow: hidden;
   display: flex;
@@ -236,32 +236,71 @@ const cancelEdit = (index: number) => {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }
 
+.description {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  margin-top: 10px;
+  /*box-sizing: border-box;*/
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-left: 2%;
+}
+
+.description + .p {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
 .edit-input {
-  width: 800px;
-  height: 100px;
+  width: 100%;
+  height: 100%;
   font-size: 16px;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   margin-top: 10px;
   box-sizing: border-box;
+  margin-left: 2%;
 }
 
-
 .button-container {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
+  display: block;
+  margin-top: 20px;
+  justify-content: center;
+  align-items: center;
 }
 
-.edit-button, .save-button, .cancel-button {
-  padding: 10px 15px;
+.section-bloc ,.editing-section-bloc {
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  margin-right: 10%;
+  margin: 10px;
+}
+
+.edit-button {
+  width: 100px;
+  height: 40px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  font-size: 12px;
+  margin-right: 20px;
+}
+
+.save-button, .cancel-button {
+  width: 100px;
+  height: 40px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background 0.3s ease;
   font-size: 12px;
-  margin-right: 5px;
 }
 
 .edit-button {