fix #169 file upload area now clickable for mobile users

resources/js/forms/classic/components/UploadFileItem.vue

@@ -15,12 +15,12 @@
     >
       <D9Icon size="lg" :name="iconName" />
     </div>
-    <div class="flex items-center justify-between w-full">
-      <div class="truncate max-w-72">
+    <div class="flex items-center justify-between w-full overflow-hidden">
+      <div class="truncate w-full">
         {{ file.name }}
       </div>
 
-      <div class="flex items-center">
+      <div class="flex items-center justify-end shrink-0">
         <div class="whitespace-nowrap text-xs font-mono">{{ fileSize }}</div>
         <button type="button" @click="emits('remove')" class="px-2">
           <D9Icon name="times" />

resources/js/forms/classic/interactions/FileAction.vue

@@ -7,18 +7,21 @@
         isOverDropZone ? 'border-content/20 py-10' : 'border-content/50',
         !isOverDropZone && !!currentFiles ? 'py-2' : 'py-10',
       ]"
+      @click="isMobileDevice ? open() : null"
       ref="dropZoneRef"
     >
       <button
-        @click="open()"
         type="button"
         class="underline text-content px-5 py-1 rounded"
+        @click="open()"
       >
         {{ t("files_choose") }}
       </button>
-      <span class="block text-xs text-content/80 leading-0">{{
-        t("files_drop")
-      }}</span>
+      <span
+        v-if="!isMobileDevice"
+        class="block text-xs text-content/80 leading-0"
+        >{{ t("files_drop") }}</span
+      >
     </div>
 
     <div v-if="currentFiles" class="my-4 space-y-2">
@@ -48,6 +51,7 @@ import { useFileDialog, useDropZone } from "@vueuse/core";
 import UploadFileItem from "@/forms/classic/components/UploadFileItem.vue";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useMobileDetection } from "@/utils/useMobileDetection";
 
 const store = useConversation();
 const { t } = useI18n();
@@ -62,6 +66,8 @@ const emit = defineEmits<{
   (event: "update"): void;
 }>();
 
+const { isMobileDevice } = useMobileDetection();
+
 const dropZoneRef = ref<HTMLDivElement>();
 
 const currentFiles = computed<File[] | false>(() => {