Empêche la disparition du bouton dans la zone loi en cas de largeur insuffisante

Renvoie à la ligne le titre principal et le sous-titre en cas de manque d'espace horizontal

src/lib/components/common/accordion/AccordionItem.svelte

@@ -96,9 +96,9 @@
           <!-- titre de zone loi -->
           <span class="flex flex-wrap items-baseline">
             <!-- en cas de manque d'espace horizontal, renvoie à la ligne au subTitle -->
-            <span class="whitespace-nowrap">{title}</span>
+            <span class="whitespace-normal break-words">{title}</span>
             {#if subTitle}
-              <span class="whitespace-nowrap text-sm font-light">
+              <span class="whitespace-normal break-words text-sm font-light">
                 &nbsp;| {subTitle}
               </span>
             {/if}
@@ -106,9 +106,15 @@
         {:else}
           <!-- titre de zone impact -->
           <div class="flex flex-col items-start p-4">
-            <span class="text-xl font-bold text-gray-600">{title}</span>
+            <span
+              class="whitespace-normal break-words text-xl font-bold text-gray-600"
+            >
+              {title}
+            </span>
             {#if subTitle}
-              <span class="text-sm text-gray-600">{subTitle}</span>
+              <span class="whitespace-normal break-words text-sm text-gray-600">
+                {subTitle}
+              </span>
             {/if}
           </div>
         {/if}

src/routes/+page.svelte

@@ -87,7 +87,10 @@
     </nav>
 
     <div class="flex flex-1 overflow-x-hidden">
-      <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement) -->
+      <!-- overflow-x-hidden permet l'affichage du scroll vertical du div de contenu en zone impact ^_^' -->
+
+      <!-- ZONE LOI = Panneau de gauche les zones éditables par l'utilisateur (amendement) -->
+
       <section
         class="ease-out-quart flex h-fit min-w-0 flex-[1_0_100%] bg-white shadow-lg transition-transform duration-500 md:z-10 md:!h-full md:flex-[0_0_33.3%] md:translate-x-0 md:overflow-visible md:!p-0"
         class:-translate-x-full={!mobileLawTab}
@@ -116,13 +119,13 @@
           </header>
 
           <!-- Content -->
-          <div class="mb-5 flex h-full overflow-y-auto">
+          <div class="mb-5 flex h-full overflow-x-auto overflow-y-auto">
             <RulesAccordion />
           </div>
         </div>
       </section>
 
-      <!-- Panneau de droite pour les impacts -->
+      <!-- ZONE IMPACT = Panneau de droite pour les impacts  -->
 
       <!--
         Note: When you change the height below (h-...), don't forget to adjust