resolving errors of my signature and initials.

app/javascript/template_builder/area.vue

@@ -140,14 +140,14 @@
         :id="field.uuid"
         :src="mySignatureUrl.url"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMySignatureClick"
       >
       <img
         v-else
         :id="field.uuid"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMySignatureClick"
       >
     </div>
@@ -162,14 +162,14 @@
         :id="field.uuid"
         :src="myInitialsUrl.url"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMyInitialClick"
       >
       <img
         v-else
         :id="field.uuid"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMyInitialClick"
       >
     </div>
@@ -216,6 +216,9 @@
   </div>
   <div
     v-if="showMySignature"
+    @pointerdown.stop
+    @mousedown.stop="startDrag"
+    @touchstart="startTouchDrag"
   >
     <MySignature
       :key="field.uuid"
@@ -233,6 +236,9 @@
   </div>
   <div
     v-if="showMyInitials"
+    @pointerdown.stop
+    @mousedown.stop="startDrag"
+    @touchstart="startTouchDrag"
   >
     <MyInitials
       :key="field.uuid"
@@ -244,7 +250,7 @@
       :template="template"
       :attachments-index="attachmentsIndex"
       @attached="handleMyInitialsAttachment"
-      @hide="showMySignature = false"
+      @hide="showMyInitials = false"
       @start="$refs.areas.scrollIntoField(field)"
     />
   </div>
@@ -509,10 +515,12 @@ export default {
     handleMyInitialsAttachment (attachment) {
       this.templateAttachments.push(attachment)
       this.makeMyInitials(attachment.uuid)
+      this.save()
     },
     handleMySignatureAttachment (attachment) {
       this.templateAttachments.push(attachment)
       this.makeMySignature(attachment.uuid)
+      this.save()
     },
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area

app/javascript/template_builder/my_initials.vue

@@ -3,6 +3,9 @@
     class="absolute"
     style="z-index: 50;"
     :style="{ ...mySignatureStyle }"
+  >
+    <div
+      style="min-height: 250px; min-width: 250px;"
     >
       <div class="flex justify-between items-center w-full mb-2">
         <label
@@ -40,7 +43,8 @@
           <a
             v-if="modelValue || computedPreviousValue"
             href="#"
-          class="btn font-medium btn-outline btn-sm"
+            class="tooltip btn font-medium btn-outline btn-sm"
+            :data-tip="'redraw'"
             @click.prevent="remove"
           >
             <IconReload :width="16" />
@@ -48,7 +52,8 @@
           <a
             v-else
             href="#"
-          class="btn font-medium btn-outline btn-sm"
+            class="tooltip btn font-medium btn-outline btn-sm"
+            :data-tip="'clear'"
             @click.prevent="clear"
           >
             <IconReload :width="16" />
@@ -70,12 +75,12 @@
       <img
         v-if="modelValue || computedPreviousValue"
         :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+        class="mx-auto bg-white border border-base-300 rounded max-h-72 w-full"
       >
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
-      class="bg-white border border-base-300 rounded-2xl"
+        class="bg-white border border-base-300 rounded-2xl max-h-72 w-full"
       />
       <input
         v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
@@ -95,6 +100,7 @@
         <span> Submit </span>
       </button>
     </div>
+  </div>
 </template>
 
 <script>

app/javascript/template_builder/my_signature.vue

@@ -56,16 +56,17 @@
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm font-medium"
+          class="tooltip btn btn-outline btn-sm font-medium"
+          :data-tip="'redraw'"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          {{ t('redraw') }}
         </a>
         <a
           v-else
           href="#"
-          class="btn btn-outline btn-sm font-medium"
+          class="tooltip btn btn-outline btn-sm font-medium"
+          :data-tip="'clear'"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -86,13 +87,13 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+      class="mx-auto bg-white border border-base-300 rounded max-h-72 w-full"
     >
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
       style="padding: 1px; 0"
-      class="bg-white border border-base-300 rounded-2xl"
+      class="bg-white border border-base-300 rounded-2xl w-full"
     />
     <input
       v-if="isTextSignature"