Fix AddImagesModal images grid and accordions layout

src/components/project/ClientBrief/AddImagesModal.vue

@@ -23,7 +23,9 @@
         data-side="right"
         style="--sidebar-width: 26rem; gap: var(--gap)"
       >
-        <component :is="activeTab.component" :params="activeTab.params" />
+        <div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
+          <component :is="activeTab.component" :params="activeTab.params" />
+        </div>
         <ImagesEditPanel :images="images" />
       </div>
     </div>
@@ -136,6 +138,10 @@ const activeTab = ref(tabs[0]);
   width: 1.5rem;
   height: 1.5rem;
 }
+#add-images .image img {
+  height: 100%;
+  width: 100%;
+}
 
 .with-sidebar[data-side="right"] > * {
   height: 100%;

src/components/project/ClientBrief/ImagesEditPanel.vue

@@ -4,7 +4,7 @@
   >
     <Accordion
       value="0"
-      class="flex flex-col"
+      class="flex flex-col | w-full"
       style="--row-gap: var(--space-8)"
     >
       <AccordionPanel

src/components/project/ClientBrief/ImagesResources.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
+    class="auto-grid"
     style="--min: 15rem; --gap: 0.5rem"
   >
     <figure v-for="image in images" class="image">

src/components/project/ClientBrief/MyImages.vue

@@ -1,54 +1,50 @@
 <template>
-  <div
+  <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
-    class="bg-grey-50 | border border-grey-200 | rounded-2xl | p-8 | overflow-y"
+    <FileUpload
-  >
+      mode="basic"
-    <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
+      name="images[]"
-      <FileUpload
+      :url="'/upload-images.json?pageUri=' + page.uri"
-        mode="basic"
+      @upload="onAdvancedUpload($event)"
-        name="images[]"
+      :auto="true"
-        :url="'/upload-images.json?pageUri=' + page.uri"
+      :multiple="true"
-        @upload="onAdvancedUpload($event)"
+      accept="image/*"
-        :auto="true"
+      :maxFileSize="1000000"
-        :multiple="true"
+      invalidFileSizeMessage="Fichier trop lourd"
-        accept="image/*"
+      chooseLabel="Ajouter une ou plusieurs images"
-        :maxFileSize="1000000"
+      class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
-        invalidFileSizeMessage="Fichier trop lourd"
+    >
-        chooseLabel="Ajouter une ou plusieurs images"
+      <template #chooseicon>
-        class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
+        <svg
-      >
+          width="20"
-        <template #chooseicon>
+          height="20"
-          <svg
+          viewBox="0 0 20 20"
-            width="20"
+          fill="none"
-            height="20"
+          xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
-              stroke="currentColor"
-              stroke-width="1.25"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </template>
-        <template
-          #content="{
-            files,
-            uploadedFiles,
-            removeUploadedFileCallback,
-            removeFileCallback,
-          }"
         >
-          <div v-if="files.length > 0">Fichiers importés</div>
+          <path
-        </template>
+            d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
-      </FileUpload>
+            stroke="currentColor"
-      <figure v-for="image in params.images" class="image">
+            stroke-width="1.25"
-        <img :src="image.url" alt="" />
+            stroke-linecap="round"
-      </figure>
+            stroke-linejoin="round"
-      <Toast />
+          />
-    </div>
+        </svg>
+      </template>
+      <template
+        #content="{
+          files,
+          uploadedFiles,
+          removeUploadedFileCallback,
+          removeFileCallback,
+        }"
+      >
+        <div v-if="files.length > 0">Fichiers importés</div>
+      </template>
+    </FileUpload>
+    <figure v-for="image in params.images" class="image">
+      <img :src="image.url" alt="" />
+    </figure>
+    <Toast />
   </div>
 </template>