Fix alignement variables lead

src/lib/components/WaterfallView.svelte

@@ -412,19 +412,17 @@
                       </div>
                       <!--Affichage zoom dispositif si variable sélectionnée-->
                       {#if decomposition.name === displayMode.parametersVariableName}
-                        <div class="flex grow">
                         <WaterfallViewFocusDispositif
                           {displayMode}
                           {situationIndex}
                         />
-                        </div>
                       {/if}
                     </div>
                   {:else if visibleChildren === undefined}
                     <!--Si c'est une variable Non-trunk, leaf-variable : La variable n'a pas de variables enfants et elle n'est pas une variable tronc -->
                     <div class="flex h-full w-full flex-col">
                       <div
-                        class="flex h-full items-stretch"
+                        class="flex h-full items-center"
                         class:whitespace-nowrap={decomposition.name !==
                           displayMode.parametersVariableName}
                       >
@@ -506,13 +504,12 @@
                               &nbsp;
                             </div>
                           {/each}
-                          <div class="flex grow">
+
                           <WaterfallViewFocusDispositif
                             {displayMode}
                             {situationIndex}
                           />
                         </div>
-                        </div>
                       {/if}
                     </div>
                   {:else}
@@ -520,7 +517,7 @@
 
                     <div class="flex h-full w-full flex-col">
                       <div
-                        class="flex h-full items-stretch justify-start"
+                        class="flex h-full items-center justify-start"
                         class:whitespace-nowrap={decomposition.name !==
                           displayMode.parametersVariableName}
                       >
@@ -589,7 +586,7 @@
                             </div>
                           {/each}
                           <div
-                            class="flex grow border-dashed border-gray-400 pr-2"
+                            class="w-full border-dashed border-gray-400 pr-2"
                             class:border-l-0={!decomposition.open}
                             class:border-l-2={decomposition.open}
                             class:pl-0.5={!decomposition.open}
@@ -695,7 +692,7 @@
             {#if decomposition.open && !trunk}
               <span class="pl-2 opacity-20">
                 <iconify-icon
-                  class="align-[-0.25rem] text-lg hover:text-le-gris-dispositif"
+                  class="align-[-0.25rem] text-lg"
                   icon="ri-sort-desc"
                 ></iconify-icon></span
               >

src/lib/components/WaterfallViewFocusDispositif.svelte

@@ -25,10 +25,10 @@
 </script>
 
 <div
-  class="mb-2 flex w-full grow flex-col border-gray-400"
+  class="my-2 flex w-full grow flex-col lg:flex-row"
   id="situation_{situationIndex}_totalimpact"
 >
-  <div class="w-full py-3 pl-5">
+  <div class="flex w-full py-3 pl-5">
     <!--MONTANT DISPOSITIF SELECTIONNE-->
     {#if displayMode.parametersVariableName !== undefined}
       <!-- Note: A reform variable is always more complete than a variable before reform. -->
@@ -39,16 +39,14 @@
               displayMode.parametersVariableName
             ]}
       {#if variableSummary !== undefined}
-        <div class="w-full flex-col">
         <div
-            class="flex w-full flex-wrap items-start gap-2 text-3xl font-semibold 2xl:text-4xl"
+          class="flex w-full flex-wrap items-start text-3xl font-semibold 2xl:text-4xl"
         >
           <VariableValueChange
             {evaluationByName}
             legend
             name={displayMode.parametersVariableName}
-            /><span class="pt-3 text-base">/an</span>
-          </div>
+          /><span class="pl-1 pt-3 text-base">/an</span>
         </div>
       {/if}
     {/if}
@@ -75,9 +73,8 @@
             !variableSummary.linked_output_variables?.includes(variableName),
         ),
       ].filter((value) => value !== undefined && value.length > 0)}
-      {@const allowColumnWrap = linkedVariablesList.length === 1}
       {#each linkedVariablesList as linkedVariables}
-        <div class="flex-shrink bg-gray-100 p-2">
+        <div class="flex w-full grow p-5">
           {#if linkedVariables !== undefined && linkedVariables.length > 0}
             {@const linkedVariablesValueByCalculationName = linkedVariables.map(
               (name) =>
@@ -89,11 +86,7 @@
                 ),
             )}
             {#if shared.showNulls || !linkedVariablesValueByCalculationName.every(isNullVariableValueByCalculationName)}
-              <ul
-                class="list-inside list-disc text-gray-800"
-                class:lg:max-h-[200px]={allowColumnWrap}
-                class:lg:flex-wrap={allowColumnWrap}
-              >
+              <ul class="list-inside list-disc text-gray-800">
                 {#each linkedVariables as linkedVariableName, index}
                   {@const linkedVariableValueByCalculationName =
                     linkedVariablesValueByCalculationName[index]}
@@ -104,7 +97,7 @@
                         : variableSummaryByNameByReformName[billName][
                             linkedVariableName
                           ]}
-                    <li class="text-base">
+                    <li class="flex text-base">
                       <a
                         class="2xl:text-md cursor-pointer text-base hover:underline"
                         href={newSimulationUrl({