From 669a217180010b2466697858cdb1f19d3aa34ac1 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 21 Sep 2025 20:48:41 +0800
Subject: [PATCH] improve the style of long tips and drag-and-drop image

---
 src/components/mobile/AIImageRecognitionSheet.vue           | 2 +-
 .../transactions/list/dialogs/AIImageRecognitionDialog.vue  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/mobile/AIImageRecognitionSheet.vue b/src/components/mobile/AIImageRecognitionSheet.vue
index 5dc80434..23db6879 100644
--- a/src/components/mobile/AIImageRecognitionSheet.vue
+++ b/src/components/mobile/AIImageRecognitionSheet.vue
@@ -14,7 +14,7 @@
             <div class="image-container display-flex justify-content-center"
                  style="height: 400px" @click="showOpenImage">
                 <img height="400px" :src="imageSrc" v-if="imageSrc" />
-                <div class="image-container-background display-flex justify-content-center align-items-center" v-if="!imageSrc">
+                <div class="image-container-background display-flex justify-content-center align-items-center padding-horizontal" v-if="!imageSrc">
                     <span>{{ tt('Click here to select a receipt or transaction image') }}</span>
                 </div>
             </div>
diff --git a/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue b/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
index 325e9bf0..21257a98 100644
--- a/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
@@ -13,10 +13,10 @@
                      @dragover.prevent
                      @dragleave.prevent="onDragLeave"
                      @drop.prevent="onDrop">
-                    <div class="d-flex w-100 fill-height justify-center align-center justify-content-center"
+                    <div class="d-flex w-100 fill-height justify-center align-center justify-content-center px-4"
                          :class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
-                        <h3 v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
-                        <h3 v-if="isDragOver">{{ tt('Release to load image') }}</h3>
+                        <h3 class="pa-2 bg-grey-200" v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
+                        <h3 class="pa-2 bg-grey-200" v-if="isDragOver">{{ tt('Release to load image') }}</h3>
                     </div>
                     <v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
                            :src="imageSrc" @click="showOpenImageDialog">