fix: resolve hydration mismatches on pages with ReuseCard and DataserviceCard

Author: ThibaudDauce

components/Pages/PageShow.vue

@@ -55,7 +55,7 @@
         v-if="'fullWidth' in blocsTypes[bloc.class]"
         v-model="(workingPage.blocs[index] as any)"
         :edit
-        :main-color="mainColor"
+        v-bind="bloc.class === 'LinksListBloc' ? { 'main-color': mainColor } : {}"
       />
 
       <!-- Other blocs use container layout -->
@@ -67,7 +67,7 @@
           :is="blocsTypes[bloc.class].component"
           v-model="(workingPage.blocs[index] as any)"
           :edit
-          :main-color="mainColor"
+          v-bind="bloc.class === 'LinksListBloc' ? { 'main-color': mainColor } : {}"
         />
       </div>
 

datagouv-components/src/components/DataserviceCard.vue

@@ -66,7 +66,7 @@
       v-if="dataservice.organization || dataservice.owner"
       class="text-gray-medium overflow-hidden flex items-center gap-1 mt-1 mb-0"
     >
-      <p
+      <div
         v-if="dataservice.organization"
         class="text-sm block overflow-hidden mb-0 relative z-[2]"
       >
@@ -81,13 +81,13 @@
           v-else
           :organization="dataservice.organization"
         />
-      </p>
-      <p
+      </div>
+      <div
         v-else
         class="text-sm mb-0 truncate"
       >
         {{ ownerName }}
-      </p>
+      </div>
       <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
       <!-- This comment is only here to fix this issue https://github.com/datagouv/cdata/issues/653, it could be empty… -->
       <p class="text-sm whitespace-nowrap mb-0">

datagouv-components/src/components/ReuseCard.vue

@@ -11,7 +11,7 @@
           </AppLink>
         </h3>
         <div class="order-3 text-sm m-0 text-gray-medium">
-          <p class="text-sm mb-0 flex items-center">
+          <div class="text-sm mb-0 flex items-center">
             <span
               v-if="reuse.organization"
               class="relative block truncate break-all z-[2] flex-initial"
@@ -36,7 +36,7 @@
             >{{ ownerName }}</span>
             <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
             <span class="block flex-none">{{ t('publié {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
-          </p>
+          </div>
           <ReuseDetails :reuse />
         </div>
       </div>