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

frontend/app/components/common/EmptyState.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="text-center py-12">
+    <div v-if="icon" class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+      <component :is="icon" class="w-8 h-8 text-base-content/30" aria-hidden="true" />
+    </div>
+    <h3 class="text-lg font-semibold text-base-content mb-1">{{ title }}</h3>
+    <p v-if="description" class="text-sm text-base-content/50 mb-6">{{ description }}</p>
+    <slot>
+      <NuxtLink v-if="actionTo" :to="actionTo" class="btn btn-primary btn-sm">
+        {{ actionLabel }}
+      </NuxtLink>
+      <button v-else-if="actionLabel" type="button" class="btn btn-primary btn-sm" @click="$emit('action')">
+        {{ actionLabel }}
+      </button>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+defineProps<{
+  title: string
+  description?: string
+  icon?: Component
+  actionLabel?: string
+  actionTo?: string
+}>()
+
+defineEmits<{
+  action: []
+}>()
+</script>

frontend/app/components/common/EntityTabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nav class="tabs tabs-bordered mb-6" role="tablist" :aria-label="ariaLabel">
+    <nav class="tabs tabs-bordered mb-6 overflow-x-auto flex-nowrap" role="tablist" :aria-label="ariaLabel">
       <button
         v-for="tab in tabs"
         :key="tab.key"

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>

frontend/app/components/machine/MachineProductsCard.vue

@@ -144,9 +144,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-
-const route = useRoute()
-const machineId = computed(() => route.params.id as string | undefined)
 import { canPreviewDocument } from '~/utils/documentPreview'
 import {
   formatSize,
@@ -154,6 +151,9 @@ import {
   downloadDocument,
 } from '~/shared/utils/documentDisplayUtils'
 
+const route = useRoute()
+const machineId = computed(() => route.params.id as string | undefined)
+
 defineProps<{
   products: Array<{
     id?: string | null