From 42cdf208faadc405c0492a0120dde76c7d9f0f0c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Fri, 13 Sep 2024 12:01:09 +0200
Subject: [PATCH] fix #169 file upload area now clickable for mobile users

---
 .../js/forms/classic/components/UploadFileItem.vue |  6 +++---
 .../js/forms/classic/interactions/FileAction.vue   | 14 ++++++++++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/js/forms/classic/components/UploadFileItem.vue b/resources/js/forms/classic/components/UploadFileItem.vue
index ea4becb8..8bebbbd4 100644
--- a/resources/js/forms/classic/components/UploadFileItem.vue
+++ b/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" />
diff --git a/resources/js/forms/classic/interactions/FileAction.vue b/resources/js/forms/classic/interactions/FileAction.vue
index 92e4553e..03011608 100644
--- a/resources/js/forms/classic/interactions/FileAction.vue
+++ b/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>(() => {