[ui] Composition API migration + mobile responsive pass

src/App.vue

@@ -2529,6 +2529,14 @@ th.validation-cell {
   height: 43px;
 }
 
+// vue-date-picker's default dark border (`#2d2d2d`) is too low-contrast
+// against the picker background. Bump it just enough to read as a
+// border without dominating, and keep the library defaults for
+// everything else (background, hover/focus stay untouched).
+.dp__theme_dark {
+  --dp-border-color: #3a3a3a !important;
+}
+
 #app .v3-emoji-picker.v3-color-theme-dark .v3-sticky {
   text-transform: uppercase;
   font-size: 0.8em;

src/components/cells/TaskStatusCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <td class="name">
+  <td>
     <div
       class="tag"
       :class="{ canceled: disable }"

src/components/lists/AllTaskList.vue

@@ -142,7 +142,12 @@
           {{ $t('main.load_more') }}
         </button>
       </div>
-      <table-info :is-loading="isLoading" :is-error="isError" />
+      <table-info
+        :is-loading="isLoading"
+        :is-error="isError"
+        :cells="10"
+        :with-actions="false"
+      />
     </div>
     <p class="has-text-centered nb-tasks" v-if="!isLoading">
       {{ stats.total }}

src/components/lists/AssetList.vue

@@ -561,7 +561,7 @@
         <p class="info">{{ $t('assets.empty_list_client') }}</p>
       </div>
 
-      <table-info :is-loading="isLoading" :is-error="isError" />
+      <table-info :is-loading="isLoading" :is-error="isError" big-cells />
     </div>
 
     <asset-list-numbers

src/components/lists/AssetTypeList.vue

@@ -18,25 +18,38 @@
         </thead>
         <tbody class="datatable-body" v-if="entries.length">
           <tr class="datatable-row" v-for="entry in entries" :key="entry.id">
-            <td class="name">
+            <td class="name" :data-label="$t('asset_types.fields.name')">
               {{ entry.name }}
               <span :title="entry.description" v-if="entry.description">
                 <help-circle-icon class="icon is-small" />
               </span>
             </td>
-            <td class="short-name">
+            <td
+              class="short-name"
+              :data-label="$t('asset_types.fields.short_name')"
+              v-if="entry.short_name"
+            >
               {{ entry.short_name }}
             </td>
-            <td class="task-types" v-if="entry.task_types?.length">
+            <td class="short-name" v-else></td>
+            <td
+              class="task-types"
+              :data-label="$t('asset_types.fields.task_types')"
+              v-if="entry.task_types?.length"
+            >
               <span
                 :key="taskType.id"
                 class="task-type-name flexrow-item"
-                v-for="taskType in sortTaskTypes(entry.task_types)"
+                v-for="taskType in sortedTaskTypes(entry.task_types)"
               >
                 <task-type-name :task-type="taskType" v-if="taskType.id" />
               </span>
             </td>
-            <td class="task-types" v-else>
+            <td
+              class="task-types"
+              :data-label="$t('asset_types.fields.task_types')"
+              v-else
+            >
               {{ $t('asset_types.include_all') }}
             </td>
             <row-actions-cell
@@ -48,64 +61,52 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="2"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-asset-types">
-      {{ entries.length }} {{ $tc('asset_types.number', entries.length) }}
+      {{ entries.length }} {{ $t('asset_types.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import { HelpCircleIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import { sortTaskTypes } from '@/lib/sorting'
 
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 
-export default {
-  name: 'asset-type-list',
-
-  components: {
-    HelpCircleIcon,
-    RowActionsCell,
-    TableInfo,
-    TaskTypeName
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    }
-  },
+const store = useStore()
 
-  emits: ['delete-clicked', 'edit-clicked'],
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  computed: {
-    ...mapGetters(['taskTypeMap'])
-  },
+defineEmits(['delete-clicked', 'edit-clicked'])
 
-  methods: {
-    sortTaskTypes(taskTypeIds) {
-      const taskTypes =
-        taskTypeIds
-          ?.map(taskTypeId => this.taskTypeMap.get(taskTypeId))
-          .filter(Boolean) ?? []
-      return sortTaskTypes(taskTypes)
-    }
-  }
+// Computed
+
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+// Functions
+
+const sortedTaskTypes = taskTypeIds => {
+  const taskTypes =
+    taskTypeIds
+      ?.map(taskTypeId => taskTypeMap.value.get(taskTypeId))
+      .filter(Boolean) ?? []
+  return sortTaskTypes(taskTypes)
 }
 </script>
 
@@ -119,4 +120,79 @@ export default {
   width: 300px;
   padding: 1em;
 }
+
+@media screen and (max-width: 768px) {
+  // Turn each row into a card: the table head disappears, every cell is
+  // labelled via its data-label attribute, and the actions cell collapses
+  // to a footer row. Keep the wrapper's overflow-y: auto from the global
+  // .datatable-wrapper rule so the list still scrolls inside .fixed-page.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
+  }
+
+  .datatable-head {
+    display: none;
+  }
+
+  .datatable-row {
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row {
+    background: var(--background-alt);
+  }
+
+  .datatable-row td {
+    border: 0;
+    display: block;
+    padding: 0.4em 0;
+    width: auto;
+  }
+
+  // Cells without a data-label are placeholders to keep the desktop
+  // table columns aligned — collapse them on mobile so empty fields
+  // don't leave gaps.
+  .datatable-row td:not([data-label]):not(.actions):not(.name) {
+    display: none;
+  }
+
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  // The name doubles as the card title — drop its label and bump the
+  // font weight.
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .datatable-row .actions {
+    display: none;
+  }
+}
 </style>

src/components/lists/BackgroundList.vue

@@ -43,7 +43,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" :cells="1" />
 
     <p class="has-text-centered">
       {{ entries.length }}

src/components/lists/CustomActionList.vue

@@ -57,7 +57,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="3"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-custom-actions">
       {{ entries.length }} {{ $t('custom_actions.number', entries.length) }}

src/components/lists/DayOffList.vue

@@ -61,7 +61,12 @@
       <p>{{ $t('days_off.no_days_off') }}</p>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="1"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered footer-info" v-if="!isLoading">
       {{ sortedDaysOff.length }}