Réduit la hauteur de l'éditeur de cas type

src/lib/components/test_cases/RolePersonsEdit.svelte

@@ -86,7 +86,7 @@
   {#each [...iterItemIdAndPersonCouples(personById, items)] as { id, person } (id)}
     <li
       animate:flip={{ duration: flipDurationMs }}
-      class="bg-gray-200 rounded-3xl w-28 py-1 text-center text-gray-700  text-sm font-semibold my-2"
+      class="bg-gray-200 rounded-3xl w-28  text-center text-gray-700 text-sm font-semibold my-1"
     >
       <div class="group flex items-center justify-between ml-4 mr-2 ">
         <div>

src/lib/components/test_cases/TestCaseEdit.svelte

@@ -394,12 +394,14 @@
 </script>
 
 <h3 class="font-bold text-xl mx-5">Composition du cas type&nbsp;:</h3>
-<section class="bg-white border-gray-200 p-2 m-3 rounded-sm mx-5">
+<section class="bg-gray-100 border-gray-200 rounded-sm mx-5 my-2 py-2">
+  <div class="flex justify-center gap-2">
     <div class="flex items-center">
-    <label class="ml-2  mr-2">
+      <PictoFemme />
+      <label class="mx-2 text-sm">
         Nombre d'adultes
         <input
-        class="w-10 p-1 rounded  mt-2 focus:border-le-bleu focus:text-le-bleu"
+          class="text-base w-10 p-1 rounded focus:border-le-bleu focus:text-le-bleu"
           min={1}
           on:change={changeAdultsCount}
           step="1"
@@ -407,13 +409,13 @@
           value={adultsId.length}
         />
       </label>
-    <PictoFemme />
     </div>
     <div class="flex items-center">
-    <label class="ml-2 mr-2">
+      <PictoEnfant />
+      <label class="mx-2 text-sm">
         Nombre d'enfants
         <input
-        class="w-10 p-1 rounded  mt-2 focus:border-le-bleu focus:text-le-bleu"
+          class="text-base  w-10 p-1 rounded focus:border-le-bleu focus:text-le-bleu"
           min={0}
           on:change={changeChildrenCount}
           step="1"
@@ -421,13 +423,14 @@
           value={childrenId.length}
         />
       </label>
-    <PictoEnfant />
+    </div>
   </div>
 
+  <div class="flex justify-center">
     {#each [...iterGroupEntities(entityByKey)] as groupEntity}
       {#if !hiddenEntitiesKeyPlural.includes(groupEntity.key_plural)}
-      <section>
-        <h1 class="font-bold mt-4 mb-1 text-lg">
+        <section class="m-2">
+          <h1 class="font-bold mt-4 mb-1 text-base">
             {groupEntity.composition_label ??
               groupEntity.label_plural ??
               groupEntity.key_plural}&nbsp;:
@@ -437,7 +440,7 @@
       {/if} -->
           {#if countGroups(situation, groupEntity) === 1}
             <div class="mb-3">
-            <label class="text-base">
+              <label class="text-sm">
                 <input
                   checked
                   class="rounded"
@@ -449,11 +452,11 @@
               </label>
             </div>
           {/if}
-        <ul class="ml-4">
+          <ul class="mr-2">
             {#each [...iterGroups(situation, groupEntity)] as [groupId, group], index (`${groupEntity.key_plural}.${index}`)}
               <li>
                 {#if countGroups(situation, groupEntity) > 1}
-                <div class="flex items-center font-bold mt-4">
+                  <div class="flex items-center  mt-2 text-sm">
                     <div>
                       {group.name ?? groupId}&nbsp;:
                     </div>
@@ -488,9 +491,9 @@
                   </div>
                 {/if}
 
-              <dl class="border-l-2 pl-4 border-black">
+                <dl class="ml-2 border-l pl-2 mt-2 border-black">
                   {#each groupEntity.roles as role}
-                  <dt class="">
+                    <dt class="text-sm">
                       {role.label ??
                         (role.max === undefined || role.max > 1
                           ? role.key_plural
@@ -518,11 +521,11 @@
           </ul>
           {#if countGroups(situation, groupEntity) > 1}
             <button
-            class="text-black hover:text-le-bleu w-64 ml-2"
+              class="text-black hover:text-le-bleu "
               on:click={() => addGroup(groupEntity.key)}
               type="button"
             >
-            <div class="mt-2 text-base  flex items-center">
+              <div class="mt-2 text-sm flex items-center">
                 <svg
                   class="fill-current inline mr-1"
                   xmlns="http://www.w3.org/2000/svg"
@@ -540,6 +543,7 @@
         </section>
       {/if}
     {/each}
+  </div>
 </section>
 
 <section class="border-t border-b-0 border-r-0 border-l-0 mt-5 mx-5">