Met en forme loyer et revenus du capital

src/lib/components/test_cases/TestCaseSummary.svelte

@@ -30,6 +30,7 @@
     type VariableValue,
   } from "$lib/variables"
   import PictoBigHopital from "../pictos/PictoBigHopital.svelte"
+  import PictoRevenusCapital from "../pictos/PictoRevenusCapital.svelte"
 
   export let displayMode: DisplayMode
   export let mode: "compare" | "select" | "view"
@@ -392,7 +393,7 @@
 />
 
 <div
-  class={mode === "view"
+  class={mode === "select"
     ? "grid gap-x-8 grid-cols-2"
     : mode === "compare"
     ? "flex flex-col"
@@ -560,7 +561,63 @@
       {/if}
     </div>
   {/each}
+</div>
+
+<div
+  class={mode === "select"
+    ? "grid gap-x-8 grid-cols-1"
+    : mode === "compare"
+    ? "flex flex-col"
+    : "grid gap-x-8 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-3"}
+>
+  <!-- Ménages -->
+  {#each Object.keys(householdSituation).sort( (populationId1, populationId2) => populationId1.localeCompare(populationId2), ) as populationId}
+    {@const loyer = getVariableValue(situation, "loyer", populationId)}
+    {@const statut_occupation_logement = getVariableValue(
+      situation,
+      "statut_occupation_logement",
+      populationId,
+    )}
+
+    <!--Frais loyer-->
+    {#if (loyer > 0 && statut_occupation_logement !== "proprietaire") || statut_occupation_logement === "loge_gratuitement" || statut_occupation_logement === "sans_domicile"}
+      <div>
+        <div class="my-2 flex items-end gap-2">
+          <div class="flex items-center">
+            <div>
+              <PictoMaison />
+            </div>
+            <div class="pl-2">
+              <span>
+                <span class="text-lg"
+                  >{euroAmountFormatter.format(loyer)}
+                  <span
+                    class="text-xs"
+                    title="Frais de loyer ou d'emprunt pour un primo-accédant par an"
+                    >{#if statut_occupation_logement === "locataire_foyer" || statut_occupation_logement === "locataire_hlm" || statut_occupation_logement === "locataire_meuble" || statut_occupation_logement === "locataire_vide"}de
+                      loyer/an
+                    {:else if statut_occupation_logement === "primo_accedant"}d'emprunt
+                      primo-accédant/an{/if}</span
+                  ></span
+                ></span
+              >
+            </div>
+          </div>
 
+          <!--Frais carburants
+      <div class="flex items-center">
+        <PictoFraisGazoil />
+        <div class="pl-2">
+          <abbr class="text-sm" title="Frais en gazoil par an">
+            Frais carburant&nbsp;:</abbr
+          >
+          <span>XX/an</span>
+        </div>
+      </div>-->
+        </div>
+      </div>
+    {/if}
+  {/each}
   <!-- Foyers fiscaux -->
   {#each Object.keys(taxableHouseholdSituation).sort( (populationId1, populationId2) => populationId1.localeCompare(populationId2), ) as populationId}
     {@const assiette_csg_revenus_capital =
@@ -596,8 +653,12 @@
       assiette_csg_plus_values +
       plus_values_base_large -
       rente_viagere_titre_onereux_net}
-    <div class="my-2">
     {#if revenus_nets_du_capital !== 0}
+      <div class="flex items-center">
+        <div>
+          <PictoRevenusCapital />
+        </div>
+        <div class="pl-2">
           <span class="text-lg text-gray-800"
             >{euroAmountFormatter.format(revenus_nets_du_capital)}</span
           >
@@ -606,50 +667,8 @@
             title="Revenus du capital, hors rentes viagières, par an"
             >de revenus du capital/an</abbr
           >
-      {/if}
-    </div>
-  {/each}
-
-  <!-- Ménages -->
-  {#each Object.keys(householdSituation).sort( (populationId1, populationId2) => populationId1.localeCompare(populationId2), ) as populationId}
-    {@const loyer = getVariableValue(situation, "loyer", populationId)}
-    {@const statut_occupation_logement = getVariableValue(
-      situation,
-      "statut_occupation_logement",
-      populationId,
-    )}
-
-    <div class="mb-4 flex items-end gap-2">
-      {#if (loyer > 0 && statut_occupation_logement !== "proprietaire") || statut_occupation_logement === "loge_gratuitement" || statut_occupation_logement === "sans_domicile"}
-        <div class="flex items-center">
-          <div>
-            <PictoMaison />
-          </div>
-          <div class="pl-2">
-            <span class="text-sm">
-              <span
-                class="text-sm"
-                title="Frais de loyer ou d'emprunt pour un primo-accédant par an"
-                >{#if statut_occupation_logement === "locataire_foyer" || statut_occupation_logement === "locataire_hlm" || statut_occupation_logement === "locataire_meuble" || statut_occupation_logement === "locataire_vide"}Loyer
-                {:else if statut_occupation_logement === "primo_accedant"}Emprunt
-                  primo-accédant{/if}</span
-              >&nbsp;:</span
-            >
-            <span>{loyer}&nbsp;€<span class="text-xs">/an</span></span>
         </div>
       </div>
     {/if}
-
-      <!--Frais carburants
-      <div class="flex items-center">
-        <PictoFraisGazoil />
-        <div class="pl-2">
-          <abbr class="text-sm" title="Frais en gazoil par an">
-            Frais carburant&nbsp;:</abbr
-          >
-          <span>XX/an</span>
-        </div>
-      </div>-->
-    </div>
   {/each}
 </div>