ETQ instructeur utilisant un terminal mobile, je veux que le détail des notifications soit lisible

app/assets/stylesheets/notifications.scss

@@ -27,3 +27,47 @@ span.notifications {
     right: -0.25rem;
   }
 }
+
+// Notifications details
+.notification-container-type {
+  position: relative;
+}
+
+.notification-dossiers {
+  margin: 0;
+  padding-left: 0;
+}
+
+.notification-dossier {
+  margin-top: 0.25rem;
+  padding: 0;
+}
+
+.notification-dossier:not(:last-child)::after {
+  content: '';
+  margin: 0.25rem 1rem 0;
+  width: 1px;
+  height: 0.875rem;
+  background-color: var(--text-default-grey);
+}
+
+.notification-dossier-contenu {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  word-break: break-word;
+}
+
+.notification-dossier-contenu.fr-link {
+  word-break: keep-all;
+}
+
+.notification-indicator {
+  list-style: none;
+  margin: 0.25rem 0 0;
+  padding: 0;
+}
+
+.notification-dossier:not(.hidden):has(+ .notification-indicator)::after,
+.notification-dossier:not(.hidden) + .notification-indicator {
+  display: none;
+}

app/javascript/controllers/truncate_notifications_controller.ts

@@ -6,7 +6,7 @@ export class TruncateNotificationsController extends ApplicationController {
       this.calculateNotificationContainerWidth();
 
     const notifications = document.querySelectorAll<HTMLElement>(
-      '.notification-dossiers'
+      '.notification-container-type'
     );
     notifications.forEach((notificationType) => {
       const notificationDossiers = Array.from(
@@ -25,7 +25,7 @@ export class TruncateNotificationsController extends ApplicationController {
         if (usedWidth < notificationContainerWidth) {
           visibleCount++;
         } else {
-          const hiddenCount = notificationDossiers.length - visibleCount - 1;
+          const hiddenCount = notificationDossiers.length - visibleCount;
           truncateContainer = this.truncateNotification(
             truncateContainer,
             hiddenCount,
@@ -38,13 +38,11 @@ export class TruncateNotificationsController extends ApplicationController {
   }
 
   private calculateNotificationContainerWidth() {
-    const container = document.querySelector<HTMLElement>(
-      '.notification-container-type'
-    );
     const notificationBadge = document.querySelector<HTMLElement>(
       '.notification-badge'
     );
-    return container!.offsetWidth - notificationBadge!.offsetWidth;
+    // 1168 : `.notification-container-type` width in desktop view
+    return 1168 - notificationBadge!.offsetWidth;
   }
 
   private truncateNotification(
@@ -53,13 +51,11 @@ export class TruncateNotificationsController extends ApplicationController {
     indicator: HTMLElement,
     notification: HTMLElement
   ) {
+    notification.classList.add('hidden');
     if (truncateContainer == false) {
       if (hiddenCount > 0) {
-        indicator!.textContent = `... +${hiddenCount}`;
+        indicator!.innerHTML = `<span class="notification-dossier-contenu fr-mr-1w" aria-hidden="true">…</span><span class="notification-dossier-contenu fr-text--bold">(+ ${hiddenCount})</span>`;
       }
-      notification.style.overflow = 'hidden';
-    } else {
-      notification.classList.add('hidden');
     }
     return true;
   }

app/views/instructeurs/procedures/_notifications_list_body.html.erb

@@ -12,37 +12,31 @@
     </h4>
 
     <% dossiers_by_notification_type.each do |notification_type, dossiers| %>
-      <div class="flex align-center fr-mt-1w notification-container-type">
-        <div class="fr-col-3 fr-pr-1w notification-badge">
+      <div class="flex align-start fr-mt-1w notification-container-type">
+        <div class="fr-col-6 fr-col-sm-3 fr-pr-1w notification-badge">
           <%= tag_notification(notification_type, generic: true) %>
         </div>
 
-        <div class="fr-col-9 flex align-center notification-dossiers">
-          <% dossiers.each_with_index do |dossier, dossier_index| %>
-            <div class="flex align-center notification-dossier">
-              <% if statut != 'supprimes' %>
-                <div class="fr-link fr-link--sm fr-mr-1w">
-                  <%= link_to dossier.id, instructeur_dossier_path(procedure_id, dossier.id) %>
-                </div>
-              <% else %>
-                <span class="fr-mr-1w fr-text--sm fr-mb-0">
-                  <%= dossier.id %>
-                </span>
-              <% end %>
+        <div class="fr-col-6 fr-col-sm-9 flex">
+          <ul class="flex wrap notification-dossiers">
+            <% dossiers.each_with_index do |dossier, dossier_index| %>
+              <li class="flex align-start notification-dossier">
+                <% if statut != 'supprimes' %>
+                  <%= link_to dossier.id, instructeur_dossier_path(procedure_id, dossier.id), class: "notification-dossier-contenu fr-link" %>
+                <% else %>
+                  <span class="notification-dossier-contenu">
+                    <%= dossier.id %>
+                  </span>
+                <% end %>
 
-              <div class="fr-mb-0">
-                <span class="no-wrap fr-text--sm">
+                <span class="notification-dossier-contenu fr-ml-1w">
                   <%= dossier.owner_name %>
                 </span>
-              </div>
-
-              <% if dossier_index != (dossiers.size - 1) %>
-                <div class="fr-mx-2w">|</div>
-              <% end %>
-            </div>
-          <% end %>
+              </li>
+            <% end %>
 
-          <span class="no-wrap fr-text--sm fr-text--bold fr-mb-0 notification-indicator"></span>
+            <li class="fr-text--sm notification-indicator"></li>
+          </ul>
         </div>
       </div>
     <% end %>