Corrige le surlignage des totaux d'amandement pour couvrir tout le texte

Et emploie flex-wrap pour les totaux sur petit écran

src/lib/components/impact/Summary.svelte

@@ -21,7 +21,7 @@
   } = $props()
 </script>
 
-<div class="flex w-full flex-row divide-x overflow-x-auto text-center">
+<div class="flex flex-wrap">
   {#each DOTATIONS_ORDER as dotation}
     {#if dotation in totalParDotation}
       <!-- TODO s'assurer de prendre ce que renvoie l'API web même si ce n'est pas dans la liste pré-définie de dotations de l'application ? -->
@@ -36,35 +36,39 @@
 
       {#if dotation !== Dotation.DCN || IMPACT_INCLUDE_DOTATION_COMMUNES_NOUVELLES_SUMMARY}
         <div
-          class="flex min-w-[10rem] flex-1 flex-col pb-6 pl-20 pr-20 text-center"
+          class="
+          box-border flex min-w-[10rem] flex-shrink flex-grow basis-[10rem]
+          flex-col items-center justify-center border-r border-gray-300 p-4
+          last:border-r-0
+        "
         >
-          <span class="flex items-center justify-center gap-2 text-lg">
-            <span class="flex items-center">
+          <span class="flex justify-center gap-2 whitespace-normal text-lg">
             <iconify-icon
               class="align-middle text-2xl"
               icon={getDotationIconName(dotation)}
               alt={dotation}
             ></iconify-icon>
-            </span>
-            <span class="align-middle">{dotation}</span>
+            {dotation}
           </span>
 
           <br />
 
+          <div class="flex flex-col">
             <span
               class={changeInEligibles
-              ? "text-center text-4xl line-through-amendment"
-              : "text-center text-4xl"}
+                ? "text-4xl line-through-amendment"
+                : "text-4xl"}
             >
               {baseEligibles}
             </span>
             {#if changeInEligibles}
               <!-- l'impact de l'amendement a été calculé -->
-            <span class="bg-le-jaune text-center text-4xl">
+              <span class="bg-le-jaune text-4xl">
                 {amendementToujoursEligibles}
               </span>
             {/if}
           </div>
+        </div>
       {/if}
     {/if}
   {/each}

tailwind.config.ts

@@ -34,6 +34,9 @@ export default {
         //text-gray-500
         //text-gray-600
         //bg-gray-100
+        //bg-gray-400
+        //border-gray-300
+        //border-gray-400
         "le-vert": {
           50: "#f1f0e6",
           100: "#e2e1cd",