feat(ui) : improve mobile responsiveness — breadcrumb truncation, tabs scroll, form grids

frontend/app/components/layout/AppBreadcrumb.vue

@@ -2,15 +2,29 @@
   <nav v-if="crumbs.length > 1" class="container mx-auto px-6 pt-4" aria-label="Fil d'Ariane">
     <div class="text-sm breadcrumbs py-0">
       <ul>
-        <li v-for="(crumb, i) in crumbs" :key="i">
-          <NuxtLink
-            v-if="i < crumbs.length - 1"
-            :to="crumb.path"
-            class="text-base-content/60 hover:text-primary transition-colors"
-          >
+        <!-- First crumb (always visible) -->
+        <li>
+          <NuxtLink :to="crumbs[0].path" class="text-base-content/60 hover:text-primary transition-colors">
+            {{ crumbs[0].label }}
+          </NuxtLink>
+        </li>
+        <!-- Ellipsis on mobile when there are middle crumbs -->
+        <li v-if="crumbs.length > 2" class="sm:hidden">
+          <span class="text-base-content/40">…</span>
+        </li>
+        <!-- Middle crumbs: hidden on mobile, visible sm+ -->
+        <li
+          v-for="(crumb, i) in crumbs.slice(1, crumbs.length - 1)"
+          :key="i"
+          class="hidden sm:list-item"
+        >
+          <NuxtLink :to="crumb.path" class="text-base-content/60 hover:text-primary transition-colors">
             {{ crumb.label }}
           </NuxtLink>
-          <span v-else class="text-base-content font-medium">{{ crumb.label }}</span>
+        </li>
+        <!-- Last crumb (always visible, current page) -->
+        <li v-if="crumbs.length > 1">
+          <span class="text-base-content font-medium">{{ crumbs[crumbs.length - 1].label }}</span>
         </li>
       </ul>
     </div>