Maintenance: Mobile - Use "truncate" class instead of a combination of classes

app/frontend/apps/mobile/components/CommonFilePreview/CommonFilePreview.vue

@@ -107,7 +107,7 @@ const onFileClick = (event: Event) => {
         <CommonIcon v-else size="base" decorative :name="icon" />
       </div>
       <div class="flex flex-1 flex-col overflow-hidden leading-4">
-        <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+        <span class="truncate">
           {{ file.name }}
         </span>
         <span v-if="file.size" class="whitespace-nowrap" :class="sizeClass">

app/frontend/apps/mobile/components/CommonOrganizationsList/CommonOrganizationsList.vue

@@ -34,7 +34,7 @@ const emit = defineEmits<{
         :entity="organization"
         class="ltr:mr-3 rtl:ml-3"
       />
-      <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+      <span class="truncate">
         {{ organization.name }}
       </span>
     </CommonLink>

app/frontend/apps/mobile/components/CommonUsersList/CommonUsersList.vue

@@ -19,7 +19,7 @@ defineProps<Props>()
     class="flex h-14 items-center"
   >
     <CommonUserAvatar decorative :entity="user" class="ltr:mr-3 rtl:ml-3" />
-    <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+    <span class="truncate">
       {{ user.fullname }}
     </span>
   </CommonLink>

app/frontend/apps/mobile/components/Organization/OrganizationItem.vue

@@ -47,7 +47,7 @@ const users = computed(() => {
     <div
       class="flex flex-1 flex-col overflow-hidden border-b border-white/10 py-3 text-gray-100"
     >
-      <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+      <span class="truncate">
         <!-- TODO: Should we show open or closed or nothing at all? -->
         {{
           entity.ticketsCount?.open === 1
@@ -67,7 +67,7 @@ const users = computed(() => {
       <div
         v-if="stringUpdated"
         data-test-id="stringUpdated"
-        class="overflow-hidden text-ellipsis text-gray"
+        class="truncate text-gray"
       >
         {{ stringUpdated }}
       </div>

app/frontend/apps/mobile/components/Ticket/TicketDuplicateDetectionDialog.vue

@@ -49,7 +49,7 @@ const application = useApplicationStore()
           <div
             class="flex flex-1 items-center gap-1 overflow-hidden border-b border-white/10 py-3 text-gray-100 ltr:pr-2 rtl:pl-2"
           >
-            <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
+            <div class="flex-1 truncate">
               <span>#{{ ticket[1] }}</span>
               <span
                 class="mb-1 whitespace-normal text-lg font-bold leading-5 line-clamp-3"

app/frontend/apps/mobile/components/Ticket/TicketItem.vue

@@ -35,7 +35,7 @@ const customer = computed(() => {
     <div
       class="flex flex-1 items-center gap-1 overflow-hidden border-b border-white/10 py-3 text-gray-100 ltr:pr-2 rtl:pl-2"
     >
-      <div class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
+      <div class="flex-1 truncate">
         <span>
           #{{ entity.number }}
           <template v-if="customer">
@@ -53,7 +53,7 @@ const customer = computed(() => {
         <div
           v-if="stringUpdated"
           data-test-id="stringUpdated"
-          class="overflow-hidden text-ellipsis text-gray"
+          class="truncate text-gray"
         >
           {{ stringUpdated }}
         </div>

app/frontend/apps/mobile/components/User/UserItem.vue

@@ -23,7 +23,7 @@ const { stringUpdated } = useEditedBy(toRef(props, 'entity'))
     <div
       class="flex flex-1 flex-col overflow-hidden border-b border-white/10 py-3 text-gray-100"
     >
-      <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+      <span class="truncate">
         <!-- TODO: Should we show open or closed or nothing at all? -->
         {{
           entity.ticketsCount?.open === 1
@@ -40,11 +40,7 @@ const { stringUpdated } = useEditedBy(toRef(props, 'entity'))
       >
         <slot> {{ entity.firstname }} {{ entity.lastname }} </slot>
       </span>
-      <div
-        v-if="stringUpdated"
-        class="overflow-hidden text-ellipsis text-gray"
-        data-test-id="stringUpdated"
-      >
+      <div v-if="stringUpdated" class="truncate" data-test-id="stringUpdated">
         {{ stringUpdated }}
       </div>
     </div>

app/frontend/apps/mobile/pages/login/components/LoginThirdParty.vue

@@ -43,9 +43,7 @@ const { fingerprint } = useFingerprint()
             decorative
             class="shrink-0 ltr:mr-2.5 rtl:ml-2.5"
           />
-          <span
-            class="overflow-hidden text-ellipsis whitespace-nowrap text-xl leading-7"
-          >
+          <span class="truncate text-xl leading-7">
             {{ $t(provider.name) }}
           </span>
         </button>

app/frontend/apps/mobile/pages/ticket/__tests__/ticket-detail-view.spec.ts

@@ -38,11 +38,8 @@ const { TicketArticleUpdatesDocument } = await import(
 const { TicketUpdatesDocument } = await import(
   '../graphql/subscriptions/ticketUpdates.api.ts'
 )
-const {
-  defaultArticles,
-  defaultTicket,
-  mockTicketDetailViewGql,
-} = await import('./mocks/detail-view.ts')
+const { defaultArticles, defaultTicket, mockTicketDetailViewGql } =
+  await import('./mocks/detail-view.ts')
 const { mockArticleQuery } = await import('./mocks/articles.ts')
 const { clearTicketArticlesLoadedState } = await import(
   '../composable/useTicketArticlesVariables.ts'

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleBubble.vue

@@ -244,9 +244,7 @@ onMounted(() => {
           class="flex items-center text-xs font-bold"
           data-test-id="article-username"
         >
-          <span
-            class="overflow-hidden text-ellipsis whitespace-nowrap break-words"
-          >
+          <span class="truncate break-words">
             {{ username }}
           </span>
         </div>