mobile fixes

app/javascript/elements/signature_form.js

@@ -55,7 +55,7 @@ export default targetable(class extends HTMLElement {
 
     this.input.files = dataTransfer.files
 
-    if (this.input.webkitEntries.length) {
+    if (this.input.webkitEntries?.length) {
       this.input.dataset.file = `${dataTransfer.files[0].name}`
     }
 

app/javascript/template_builder/conditions_modal.vue

@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -33,7 +33,7 @@
           >{{ t('available_in_pro') }}</a>
         </div>
         <form @submit.prevent="validateSaveAndClose">
-          <div class="my-4">
+          <div :class="inline && nativePlatform === 'android' ? 'mt-1 mb-4' : 'my-4'">
             <div
               v-for="(condition, cindex) in conditions"
               :key="cindex"
@@ -168,7 +168,7 @@
 <script>
 export default {
   name: 'ConditionModal',
-  inject: ['t', 'template', 'withConditions'],
+  inject: ['t', 'template', 'withConditions', 'nativePlatform'],
   props: {
     item: {
       type: Object,

app/javascript/template_builder/description_modal.vue

@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -27,7 +27,7 @@
             <div>
               <label
                 dir="auto"
-                class="label text-sm"
+                :class="['label text-sm', { 'pt-0 mt-1': inline && nativePlatform === 'android' }]"
                 for="description_field"
               >
                 {{ t('description') }}
@@ -71,7 +71,7 @@
 <script>
 export default {
   name: 'DescriptionModal',
-  inject: ['t', 'template'],
+  inject: ['t', 'template', 'nativePlatform'],
   props: {
     field: {
       type: Object,

app/javascript/template_builder/font_modal.vue

@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -21,7 +21,7 @@
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
-      <div class="mt-4">
+      <div :class="inline && nativePlatform === 'android' ? 'mt-1' : 'mt-4'">
         <div>
           <div class="flex flex-wrap items-center gap-1.5">
             <span>
@@ -200,7 +200,7 @@ export default {
   components: {
     IconChevronDown
   },
-  inject: ['t', 'template'],
+  inject: ['t', 'template', 'nativePlatform'],
   props: {
     field: {
       type: Object,

app/javascript/template_builder/formula_modal.vue

@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -32,7 +32,7 @@
             class="link"
           >{{ t('available_in_pro') }}</a>
         </div>
-        <div class="flex flex-wrap mb-2 gap-y-1 pt-1">
+        <div :class="['flex flex-wrap mb-2 gap-y-1', inline && nativePlatform === 'android' ? 'mt-1' : 'pt-1']">
           <button
             v-for="f in fields"
             :key="f.uuid"
@@ -152,7 +152,7 @@ export default {
     IconCodePlus,
     IconMathFunction
   },
-  inject: ['t', 'template', 'withFormula'],
+  inject: ['t', 'template', 'withFormula', 'nativePlatform'],
   props: {
     field: {
       type: Object,

app/javascript/template_builder/revisions_modal.vue

@@ -5,7 +5,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 mt-20 w-full'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 mt-20 w-full'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-3 font-medium"
@@ -63,7 +63,7 @@ import { IconUser, IconInnerShadowTop } from '@tabler/icons-vue'
 export default {
   name: 'RevisionsModal',
   components: { IconUser, IconInnerShadowTop },
-  inject: ['t', 'baseFetch'],
+  inject: ['t', 'baseFetch', 'nativePlatform'],
   props: {
     template: {
       type: Object,