From 3ed15e383bdcbdd10baf4d3599b86729c00eb846 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Tue, 15 Sep 2026 19:45:29 +0300
Subject: [PATCH] adjust mobile builder

---
 app/javascript/template_builder/builder.vue   | 342 ++++++++++--------
 app/javascript/template_builder/controls.vue  | 105 ------
 .../documents_editor_crop.vue                 | 140 +++----
 .../documents_editor_modal.vue                |  47 ++-
 .../documents_editor_redact.vue               |  58 +--
 .../template_builder/drag_placeholder.vue     |   8 +-
 app/javascript/template_builder/field.vue     |  41 ++-
 app/javascript/template_builder/fields.vue    |  86 +++--
 app/javascript/template_builder/i18n.js       |  21 ++
 .../template_builder/mobile_draw_field.vue    | 101 ------
 .../template_builder/mobile_drawer.vue        |  68 ++++
 .../template_builder/mobile_fields.vue        | 142 --------
 12 files changed, 521 insertions(+), 638 deletions(-)
 delete mode 100644 app/javascript/template_builder/controls.vue
 delete mode 100644 app/javascript/template_builder/mobile_draw_field.vue
 create mode 100644 app/javascript/template_builder/mobile_drawer.vue
 delete mode 100644 app/javascript/template_builder/mobile_fields.vue

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 82601835e..4992383c8 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -2,7 +2,7 @@
   <div
     ref="dragContainer"
     style="max-width: 1600px"
-    :class="isNativeView ? 'px-4 pt-3 pb-6' : 'mx-auto pl-3 md:pl-4 h-full'"
+    :class="isNativeView ? (isRevisionsView ? 'px-4 pt-3 pb-6' : 'px-4') : 'mx-auto pl-3 md:pl-4 h-full'"
     @dragover="onDragover"
     @drop="isDragFile = false"
   >
@@ -25,79 +25,117 @@
       :is-default="defaultFields.includes(toRaw(dragField))"
       :is-required="defaultRequiredFields.includes(toRaw(dragField))"
     />
-    <div
-      v-if="isDocumentsView"
-      class="space-y-3"
+    <MobileDrawer
+      v-if="isDocumentsView || (withMobileDrawers && withDocumentsList && isBreakpointLg)"
+      side="left"
+      :inline="isDocumentsView"
+      :open="isDocumentsDrawerOpen"
+      @close="isDocumentsDrawerOpen = false"
     >
-      <DocumentPreview
-        v-for="(item, index) in template.schema"
-        :key="item.attachment_uuid"
-        :with-arrows="template.schema.length > 1"
-        :with-visible-controls="true"
-        :item="item"
-        :document="sortedDocuments[index]"
-        :accept-file-types="acceptFileTypes"
-        :with-replace-button="withUploadButton"
-        :with-google-drive="withGoogleDrive"
-        :authenticity-token="authenticityToken"
-        :editable="editable"
-        :dynamic-documents="dynamicDocuments"
-        :with-dynamic-documents="withDynamicDocuments"
-        :template="template"
-        @scroll-to="postNativeEvent('template-builder:scroll-to', { attachment_uuid: item.attachment_uuid }, true)"
-        @remove="onDocumentRemove"
-        @replace="onDocumentReplace"
-        @up="moveDocument(item, -1)"
-        @reorder="reorderFields"
-        @edit="editModalDocumentUuid = item.attachment_uuid"
-        @down="moveDocument(item, 1)"
-        @change="save"
-      />
-      <Upload
-        v-if="editable && withUploadButton"
-        :accept-file-types="acceptFileTypes"
-        :authenticity-token="authenticityToken"
-        :with-google-drive="withGoogleDrive"
-        :template-id="template.id"
-        @success="updateFromUpload"
-      />
-    </div>
-    <div v-if="isFieldsView">
-      <Fields
-        ref="fields"
-        :fields="template.fields"
-        :submitters="template.submitters"
-        :selected-submitter="selectedSubmitter"
-        :with-help="withHelp"
-        :default-submitters="defaultSubmitters"
-        :draw-field-type="drawFieldType"
-        :custom-fields="customFields"
-        :with-custom-fields="withCustomFields"
-        :with-fields-search="withFieldsSearch"
-        :default-fields="[...defaultRequiredFields, ...defaultFields]"
-        :with-custom-fields-tab="false"
-        :template="template"
-        :default-required-fields="defaultRequiredFields"
-        :detect-custom-fields-index="detectCustomFieldsIndex"
-        :field-types="fieldTypes"
-        :with-fields-detection="withFieldsDetection"
-        :with-detect-existing-fields="withDetectExistingFields"
-        :with-signature-id="withSignatureId"
-        :with-prefillable="withPrefillable"
-        :only-defined-fields="onlyDefinedFields"
-        :editable="editable"
-        :scroll-on-edit="false"
-        @add-field="addField"
-        @set-draw="postNativeEvent('template-builder:draw-field', { uuid: $event.field.uuid, option: $event.option }, true)"
-        @remove-field="onRemoveField"
-        @remove-submitter="onRemoveSubmitter"
-        @select-submitter="selectedSubmitter = $event"
-        @set-draw-type="postNativeEvent('template-builder:draw-field', { type: $event }, true)"
-        @change-submitter="selectedSubmitter = $event"
-        @scroll-to-area="onDrawerScrollToArea"
-        @rebuild-variables-schema="rebuildVariablesSchema"
-      />
-    </div>
+      <div class="pt-3 space-y-3">
+        <DocumentPreview
+          v-for="(item, index) in template.schema"
+          :key="item.attachment_uuid"
+          :with-arrows="template.schema.length > 1"
+          :with-visible-controls="true"
+          :item="item"
+          :document="sortedDocuments[index]"
+          :accept-file-types="acceptFileTypes"
+          :with-replace-button="withUploadButton"
+          :with-google-drive="withGoogleDrive"
+          :authenticity-token="authenticityToken"
+          :editable="editable"
+          :dynamic-documents="dynamicDocuments"
+          :with-dynamic-documents="withDynamicDocuments"
+          :template="template"
+          @scroll-to="onDrawerScrollTo(item)"
+          @remove="onDocumentRemove"
+          @replace="onDocumentReplace"
+          @up="moveDocument(item, -1)"
+          @reorder="reorderFields"
+          @edit="editModalDocumentUuid = item.attachment_uuid"
+          @down="moveDocument(item, 1)"
+          @change="save"
+        />
+      </div>
+      <div
+        v-if="editable && (withUploadButton || withAddPageButton)"
+        class="pt-3 space-y-2"
+        :class="isDocumentsView ? 'pb-6' : 'sticky bottom-0 bg-base-100 pb-3'"
+      >
+        <Upload
+          v-if="withUploadButton"
+          :accept-file-types="acceptFileTypes"
+          :authenticity-token="authenticityToken"
+          :with-google-drive="withGoogleDrive"
+          :template-id="template.id"
+          @success="updateFromUpload"
+        />
+        <button
+          v-if="withAddPageButton"
+          class="btn btn-outline w-full add-blank-page-button"
+          @click.prevent="addBlankPage"
+        >
+          <IconInnerShadowTop
+            v-if="isLoadingBlankPage"
+            class="animate-spin w-5 h-5"
+          />
+          <IconPlus
+            v-else
+            class="w-5 h-5"
+          />
+          {{ t('add_blank_page') }}
+        </button>
+      </div>
+    </MobileDrawer>
+    <MobileDrawer
+      v-if="isFieldsView || (withMobileDrawers && withFieldsList && editable)"
+      side="right"
+      :inline="isFieldsView"
+      :open="isFieldsDrawerOpen"
+      :class="{ 'md:hidden': !isMobile }"
+      @close="isFieldsDrawerOpen = false"
+    >
+      <div class="pb-6">
+        <Fields
+          :with-top-padding="true"
+          :fields="template.fields"
+          :submitters="template.submitters"
+          :selected-submitter="selectedSubmitter"
+          :with-help="false"
+          :default-submitters="defaultSubmitters"
+          :draw-field-type="drawFieldType"
+          :custom-fields="customFields"
+          :with-custom-fields="withCustomFields"
+          :with-fields-search="withFieldsSearch"
+          :default-fields="[...defaultRequiredFields, ...defaultFields]"
+          :with-custom-fields-tab="false"
+          :template="template"
+          :default-required-fields="defaultRequiredFields"
+          :detect-custom-fields-index="detectCustomFieldsIndex"
+          :field-types="fieldTypes"
+          :with-fields-detection="withFieldsDetection"
+          :with-detect-existing-fields="withDetectExistingFields"
+          :with-signature-id="withSignatureId"
+          :with-prefillable="withPrefillable"
+          :only-defined-fields="onlyDefinedFields"
+          :editable="editable"
+          :scroll-on-edit="false"
+          @add-field="addField"
+          @set-draw="onDrawerSetDraw"
+          @remove-field="onRemoveField"
+          @remove-submitter="onRemoveSubmitter"
+          @select-submitter="selectedSubmitter = $event"
+          @set-draw-type="onDrawerSetDrawType"
+          @set-drag="dragField = $event"
+          @set-drag-placeholder="$refs.dragPlaceholder.dragPlaceholder = $event"
+          @drag-end="[dragField = null, $refs.dragPlaceholder.dragPlaceholder = null]"
+          @change-submitter="selectedSubmitter = $event"
+          @scroll-to-area="onDrawerScrollToArea"
+          @rebuild-variables-schema="rebuildVariablesSchema"
+        />
+      </div>
+    </MobileDrawer>
     <div
       v-if="isRevisionsView && !isRevisionsModalOpen"
       class="flex justify-center py-8"
@@ -636,53 +674,7 @@
                 @delete-selected-areas="deleteSelectedAreas"
                 @autodetect-fields="detectFieldsForPage"
               />
-              <DocumentControls
-                v-if="isBreakpointLg && editable"
-                :with-arrows="template.schema.length > 1"
-                :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
-                :with-replace-button="withUploadButton"
-                :with-google-drive="withGoogleDrive"
-                :authenticity-token="authenticityToken"
-                :accept-file-types="acceptFileTypes"
-                :document="document"
-                :template="template"
-                class="pb-2 mb-2 border-b border-base-300 border-dashed"
-                @remove="onDocumentRemove"
-                @replace="onDocumentReplace"
-                @up="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), -1)"
-                @down="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), 1)"
-                @change="save"
-              />
             </template>
-            <div
-              v-if="sortedDocuments.length && isBreakpointLg && editable"
-              class="pb-4 space-y-2"
-            >
-              <Upload
-                v-if="withUploadButton"
-                :template-id="template.id"
-                :accept-file-types="acceptFileTypes"
-                :authenticity-token="authenticityToken"
-                :with-google-drive="withGoogleDrive"
-                @success="updateFromUpload"
-              />
-              <button
-                v-if="withAddPageButton"
-                id="add_blank_page_button"
-                class="btn btn-outline w-full mt-4 add-blank-page-button"
-                @click.prevent="addBlankPage"
-              >
-                <IconInnerShadowTop
-                  v-if="isLoadingBlankPage"
-                  class="animate-spin w-5 h-5"
-                />
-                <IconPlus
-                  v-else
-                  class="w-5 h-5"
-                />
-                {{ t('add_blank_page') }}
-              </button>
-            </div>
           </template>
         </div>
       </div>
@@ -797,27 +789,52 @@
           @click="[drawField = null, drawOption = null]"
         />
       </native-action>
-      <MobileDrawField
+      <button
         v-if="drawField && (isBreakpointLg || isMobile) && !nativePlatform"
-        :draw-field="drawField"
-        :fields="template.fields"
-        :submitters="template.submitters"
-        :selected-submitter="selectedSubmitter"
+        class="btn btn-neutral text-white btn-lg rounded-full no-animation transition-none absolute bottom-4 -left-3 md:-left-4 right-0 mx-auto w-fit z-10 flex-nowrap gap-2 px-5 max-[400px]:px-4"
         :class="{ 'md:hidden': !isMobile }"
-        :editable="editable"
-        @cancel="[drawField = null, drawOption = null]"
-        @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
-      />
-      <MobileFields
-        v-if="sortedDocuments.length && !drawField && editable && !nativePlatform"
-        :fields="template.fields"
-        :default-fields="[...defaultRequiredFields, ...defaultFields]"
-        :default-required-fields="defaultRequiredFields"
-        :field-types="fieldTypes"
+        style="max-width: calc(100% - 11rem); --btn-focus-scale: 1"
+        @click.prevent="[drawField = null, drawOption = null]"
+      >
+        <component
+          :is="fieldIcons[drawField.type]"
+          :width="22"
+          :height="22"
+          :stroke-width="1.6"
+          class="flex-shrink-0 max-[400px]:hidden"
+        />
+        <span class="truncate normal-case font-normal text-[17px] max-[400px]:text-[15px]">{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
+        <IconX
+          :width="18"
+          :height="18"
+          :stroke-width="2.5"
+          class="flex-shrink-0"
+        />
+      </button>
+      <button
+        v-if="withMobileDrawers && withDocumentsList && isBreakpointLg"
+        class="btn btn-neutral text-white btn-circle btn-lg absolute bottom-4 left-1 md:left-0 z-10"
+        :title="t('documents')"
+        @click.prevent="isDocumentsDrawerOpen = true"
+      >
+        <IconFiles
+          :width="26"
+          :height="26"
+          :stroke-width="1.6"
+        />
+      </button>
+      <button
+        v-if="withMobileDrawers && withFieldsList && editable"
+        class="btn btn-neutral text-white btn-circle btn-lg absolute bottom-4 right-4 z-10"
         :class="{ 'md:hidden': !isMobile }"
-        :selected-submitter="selectedSubmitter"
-        @select="startFieldDraw($event)"
-      />
+        title="Fields"
+        @click.prevent="isFieldsDrawerOpen = true"
+      >
+        <IconPlus
+          :width="28"
+          :height="28"
+        />
+      </button>
     </div>
     <Transition
       enter-active-class="transition-all duration-300 ease-out"
@@ -920,18 +937,16 @@ import Dropzone from './dropzone'
 import HoverDropzone from './hover_dropzone'
 import DragPlaceholder from './drag_placeholder'
 import Fields from './fields'
-import MobileDrawField from './mobile_draw_field'
+import MobileDrawer from './mobile_drawer'
 import FieldType from './field_type'
 import Document from './document'
 import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
-import DocumentControls from './controls'
-import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import RevisionsModal from './revisions_modal'
 import DocumentsEditorModal from './documents_editor_modal'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
+import { IconPlus, IconFiles, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
@@ -955,15 +970,14 @@ export default {
     Document,
     Fields,
     IconInfoCircle,
-    MobileDrawField,
+    MobileDrawer,
     IconPlus,
+    IconFiles,
     IconWritingSign,
-    MobileFields,
     Logo,
     Dropzone,
     HoverDropzone,
     DocumentPreview,
-    DocumentControls,
     IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
@@ -1362,6 +1376,8 @@ export default {
       isDragFile: false,
       isMathLoaded: false,
       isRevisionsModalOpen: false,
+      isDocumentsDrawerOpen: false,
+      isFieldsDrawerOpen: false,
       editModalDocumentUuid: null,
       revisions: [],
       beforeRevisionSnapshot: null,
@@ -1407,12 +1423,16 @@ export default {
       return this.selectedAreasRef.value[this.selectedAreasRef.value.length - 1]
     },
     fieldNames: FieldType.computed.fieldNames,
+    fieldIcons: FieldType.computed.fieldIcons,
     isDocumentsView () {
       return this.view === 'documents'
     },
     isFieldsView () {
       return this.view === 'fields'
     },
+    withMobileDrawers () {
+      return !this.nativePlatform && !this.isNativeView && this.sortedDocuments.length > 0
+    },
     isRevisionsView () {
       return this.view === 'revisions'
     },
@@ -2406,10 +2426,40 @@ export default {
     postNativeEvent (name, detail, dismiss = false) {
       window.webkit?.messageHandlers?.modal?.postMessage({ action: 'dispatch', name, detail: JSON.stringify(detail), dismiss: dismiss ? 'true' : 'false' })
     },
+    onDrawerScrollTo (item) {
+      if (this.isNativeView) {
+        this.postNativeEvent('template-builder:scroll-to', { attachment_uuid: item.attachment_uuid }, true)
+      } else {
+        this.isDocumentsDrawerOpen = false
+        this.scrollIntoDocument(item)
+      }
+    },
+    onDrawerSetDraw ({ field, option }) {
+      if (this.isNativeView) {
+        this.postNativeEvent('template-builder:draw-field', { uuid: field.uuid, option }, true)
+      } else {
+        this.isFieldsDrawerOpen = false
+        this.drawField = field
+        this.drawOption = option
+      }
+    },
+    onDrawerSetDrawType (type) {
+      if (this.isNativeView) {
+        this.postNativeEvent('template-builder:draw-field', { type }, true)
+      } else {
+        this.isFieldsDrawerOpen = false
+        this.startFieldDraw({ type })
+      }
+    },
     onDrawerScrollToArea (area) {
-      const field = this.template.fields.find((f) => (f.areas || []).includes(area))
+      if (this.isNativeView) {
+        const field = this.template.fields.find((f) => (f.areas || []).includes(area))
 
-      this.postNativeEvent('template-builder:select-field', { uuid: field?.uuid, attachment_uuid: area.attachment_uuid, page: area.page, x: area.x, y: area.y }, true)
+        this.postNativeEvent('template-builder:select-field', { uuid: field?.uuid, attachment_uuid: area.attachment_uuid, page: area.page, x: area.x, y: area.y }, true)
+      } else {
+        this.isFieldsDrawerOpen = false
+        this.scrollToArea(area)
+      }
     },
     syncNative () {
       const { schema, documents, fields, submitters } = this.template
diff --git a/app/javascript/template_builder/controls.vue b/app/javascript/template_builder/controls.vue
deleted file mode 100644
index df976002b..000000000
--- a/app/javascript/template_builder/controls.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div class="flex space-x-2">
-    <Contenteditable
-      class="w-full block mr-6 document-preview-name"
-      :model-value="item.name"
-      :icon-width="16"
-      @update:model-value="onUpdateName"
-    />
-    <ReplaceButton
-      v-if="withReplaceButton"
-      :template-id="template.id"
-      :accept-file-types="acceptFileTypes"
-      :authenticity-token="authenticityToken"
-      :with-google-drive="withGoogleDrive"
-      :google-drive-file-id="item.google_drive_file_id"
-      @click.stop
-      @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
-    />
-    <button
-      v-if="withArrows"
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
-      style="width: 24px; height: 24px"
-      @click.stop="$emit('up', item)"
-    >
-      &uarr;
-    </button>
-    <button
-      v-if="withArrows"
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
-      style="width: 24px; height: 24px"
-      @click.stop="$emit('down', item)"
-    >
-      &darr;
-    </button>
-    <button
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
-      style="width: 24px; height: 24px"
-      @click.stop="$emit('remove', item)"
-    >
-      &times;
-    </button>
-  </div>
-</template>
-
-<script>
-import Contenteditable from './contenteditable'
-import Upload from './upload'
-import ReplaceButton from './replace'
-
-export default {
-  name: 'DocumentControls',
-  components: {
-    Contenteditable,
-    ReplaceButton
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    template: {
-      type: Object,
-      required: true
-    },
-    document: {
-      type: Object,
-      required: true
-    },
-    acceptFileTypes: {
-      type: String,
-      required: false,
-      default: 'image/*, application/pdf, application/zip, application/json'
-    },
-    withReplaceButton: {
-      type: Boolean,
-      required: true,
-      default: true
-    },
-    withGoogleDrive: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    authenticityToken: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    withArrows: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ['change', 'remove', 'up', 'down', 'replace'],
-  methods: {
-    upload: Upload.methods.upload,
-    onUpdateName (value) {
-      this.item.name = value
-
-      this.$emit('change')
-    }
-  }
-}
-</script>
diff --git a/app/javascript/template_builder/documents_editor_crop.vue b/app/javascript/template_builder/documents_editor_crop.vue
index 3b23c5a33..0df5f4faa 100644
--- a/app/javascript/template_builder/documents_editor_crop.vue
+++ b/app/javascript/template_builder/documents_editor_crop.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-1 min-h-0">
+  <div class="flex flex-col md:flex-row flex-1 min-h-0">
     <div
-      class="flex-1 min-h-0 flex items-center justify-center px-6 py-4"
+      class="flex-1 min-h-0 flex items-center justify-center px-4 md:px-6 py-4"
       style="container-type: size"
     >
       <div
@@ -46,73 +46,75 @@
         />
       </div>
     </div>
-    <div class="w-56 flex-none border-l px-4 py-4 space-y-2 flex flex-col">
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
-        :disabled="!!isProcessing"
-        @click.prevent="submit(true)"
-      >
-        <IconInnerShadowTop
-          v-if="isProcessing === 'scan'"
-          class="w-4 h-4 animate-spin"
-        />
-        <IconScan
-          v-else
-          class="w-4 h-4"
-        />
-        {{ t('crop_and_scan') }}
-      </button>
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
-        :disabled="!!isProcessing"
-        @click.prevent="submit(false)"
-      >
-        <IconInnerShadowTop
-          v-if="isProcessing === 'crop'"
-          class="w-4 h-4 animate-spin"
-        />
-        <IconCrop
-          v-else
-          width="22"
-          height="22"
-          style="margin-left: -3px"
-          :stroke-width="1.5"
-        />
-        <span :style="{ 'margin-left': isProcessing === 'crop' ? '0px' : '-3px' }">
-          {{ t('crop') }}
-        </span>
-      </button>
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
-        @click.prevent="$emit('cancel')"
-      >
-        <IconX class="w-4 h-4" />
-        {{ t('cancel') }}
-      </button>
-      <div class="border-t !mt-3 !mb-1" />
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
-        @click.prevent="rotateCw"
-      >
-        <IconRotateClockwise class="w-4 h-4" />
-        {{ t('rotate') }}
-      </button>
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
-        :class="{ 'btn-active': flipH }"
-        @click.prevent="toggleFlip('flipH')"
-      >
-        <IconFlipVertical class="w-4 h-4" />
-        {{ t('flip_horizontal') }}
-      </button>
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
-        :class="{ 'btn-active': flipV }"
-        @click.prevent="toggleFlip('flipV')"
-      >
-        <IconFlipHorizontal class="w-4 h-4" />
-        {{ t('flip_vertical') }}
-      </button>
+    <div class="flex-none px-4 border-t py-3 md:w-56 md:border-t-0 md:border-l md:py-4 md:space-y-2 md:flex md:flex-col">
+      <div class="grid grid-cols-3 gap-2 md:block md:space-y-2">
+        <button
+          class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          :disabled="!!isProcessing"
+          @click.prevent="submit(true)"
+        >
+          <IconInnerShadowTop
+            v-if="isProcessing === 'scan'"
+            class="w-4 h-4 animate-spin"
+          />
+          <IconScan
+            v-else
+            class="w-4 h-4"
+          />
+          {{ t('crop_and_scan') }}
+        </button>
+        <button
+          class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          :disabled="!!isProcessing"
+          @click.prevent="submit(false)"
+        >
+          <IconInnerShadowTop
+            v-if="isProcessing === 'crop'"
+            class="w-4 h-4 animate-spin"
+          />
+          <IconCrop
+            v-else
+            width="22"
+            height="22"
+            style="margin-left: -3px"
+            :stroke-width="1.5"
+          />
+          <span :style="{ 'margin-left': isProcessing === 'crop' ? '0px' : '-3px' }">
+            {{ t('crop') }}
+          </span>
+        </button>
+        <button
+          class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          @click.prevent="$emit('cancel')"
+        >
+          <IconX class="w-4 h-4" />
+          {{ t('cancel') }}
+        </button>
+        <div class="hidden md:block border-t !mt-3 !mb-1" />
+        <button
+          class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          @click.prevent="rotateCw"
+        >
+          <IconRotateClockwise class="w-4 h-4" />
+          {{ t('rotate') }}
+        </button>
+        <button
+          class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          :class="{ 'btn-active': flipH }"
+          @click.prevent="toggleFlip('flipH')"
+        >
+          <IconFlipVertical class="w-4 h-4" />
+          {{ t('flip_horizontal') }}
+        </button>
+        <button
+          class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          :class="{ 'btn-active': flipV }"
+          @click.prevent="toggleFlip('flipV')"
+        >
+          <IconFlipHorizontal class="w-4 h-4" />
+          {{ t('flip_vertical') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/template_builder/documents_editor_modal.vue b/app/javascript/template_builder/documents_editor_modal.vue
index 1d25c8c31..1682bcdb5 100644
--- a/app/javascript/template_builder/documents_editor_modal.vue
+++ b/app/javascript/template_builder/documents_editor_modal.vue
@@ -10,8 +10,8 @@
       @click.prevent="$emit('close')"
     />
     <div
-      class="modal-box relative flex flex-col p-0 w-full h-full rounded-2xl"
-      style="max-width: 1240px; max-height: 92vh"
+      class="modal-box relative flex flex-col p-0 w-full h-full rounded-none md:rounded-2xl overflow-x-hidden !max-h-full md:!max-h-[92vh]"
+      style="max-width: 1240px"
     >
       <div class="flex justify-between items-center border-b py-2 px-6 font-medium">
         <span
@@ -26,7 +26,9 @@
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
-      <div class="flex flex-1 min-h-0 relative">
+      <div
+        class="flex flex-col md:flex-row flex-1 min-h-0 relative"
+      >
         <CropView
           v-if="cropPageItem"
           class="absolute inset-0 z-10 bg-base-100"
@@ -53,7 +55,9 @@
           class="contents"
           :class="{ invisible: cropPageItem || redactPageItem }"
         >
-          <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+          <div
+            class="flex-1 overflow-y-auto overflow-x-hidden px-4 md:px-6 py-4 space-y-4"
+          >
             <div
               v-for="(doc, docIndex) in layout"
               :key="doc.attachmentUuid"
@@ -170,7 +174,7 @@
               </div>
               <div
                 v-if="(!collapsedDocumentsIndex[doc.attachmentUuid] || layout.length === 1) && doc.pages.length"
-                class="grid grid-cols-4 gap-3"
+                class="grid grid-cols-2 md:grid-cols-4 gap-3"
                 @dragover.prevent="onGridDragover(docIndex, $event)"
                 @drop.prevent="onPageDrop"
               >
@@ -178,7 +182,7 @@
                   v-for="(page, pageIndex) in doc.pages"
                   :key="page.id"
                   :data-page-id="page.id"
-                  class="relative cursor-pointer group"
+                  class="relative min-w-0 cursor-pointer group"
                   draggable="true"
                   @click="selectedPageId = page.id"
                   @mousedown="onPageMousedown(page, $event)"
@@ -245,26 +249,30 @@
               </template>
             </div>
           </div>
-          <div class="w-56 flex-none border-l px-4 py-4 flex flex-col">
-            <div class="space-y-2">
+          <div
+            class="flex-none px-4 border-t py-3 flex flex-col gap-3 md:w-56 md:border-t-0 md:border-l md:py-4 md:gap-0"
+          >
+            <div class="grid grid-cols-4 gap-2 md:block md:space-y-2">
               <button
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 :disabled="!selectedPageId"
                 @click.prevent="movePage(-1)"
               >
                 <IconArrowBackUp class="w-4 h-4" />
-                {{ t('move_backward') }}
+                <span class="md:hidden">{{ t('backward') }}</span>
+                <span class="hidden md:inline">{{ t('move_backward') }}</span>
               </button>
               <button
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 :disabled="!selectedPageId"
                 @click.prevent="movePage(1)"
               >
                 <IconArrowForwardUp class="w-4 h-4" />
-                {{ t('move_forward') }}
+                <span class="md:hidden">{{ t('forward') }}</span>
+                <span class="hidden md:inline">{{ t('move_forward') }}</span>
               </button>
               <button
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 :disabled="!selectedPageId"
                 @click.prevent="rotatePage"
               >
@@ -272,7 +280,7 @@
                 {{ t('rotate') }}
               </button>
               <button
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 :disabled="!selectedPageId || isReplacing"
                 @click.prevent="replaceSelected"
               >
@@ -303,7 +311,7 @@
                 @change="onReplaceDocFilesPicked"
               >
               <button
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 :disabled="!selectedPageId"
                 @click.prevent="openRedactView"
               >
@@ -312,7 +320,7 @@
               </button>
               <button
                 v-if="isSelectedPageCroppable"
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 @click.prevent="openCropView"
               >
                 <IconCrop
@@ -326,15 +334,16 @@
                 </span>
               </button>
               <button
-                class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300 text-red-600"
+                class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 text-red-600 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
                 :disabled="!selectedPageId"
                 @click.prevent="removePage"
               >
                 <IconTrashX class="w-4 h-4" />
-                {{ t('remove_page') }}
+                <span class="md:hidden">{{ t('remove') }}</span>
+                <span class="hidden md:inline">{{ t('remove_page') }}</span>
               </button>
             </div>
-            <div class="mt-auto space-y-2">
+            <div class="grid grid-cols-2 gap-2 md:block md:mt-auto md:space-y-2">
               <Upload
                 :template-id="template.id"
                 :accept-file-types="acceptFileTypes"
diff --git a/app/javascript/template_builder/documents_editor_redact.vue b/app/javascript/template_builder/documents_editor_redact.vue
index c1cae67b3..4e4a07b3d 100644
--- a/app/javascript/template_builder/documents_editor_redact.vue
+++ b/app/javascript/template_builder/documents_editor_redact.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-1 min-h-0">
-    <div class="flex-1 overflow-y-auto px-6 py-4">
+  <div class="flex flex-col md:flex-row flex-1 min-h-0">
+    <div class="flex-1 overflow-y-auto overflow-x-hidden px-4 md:px-6 py-4">
       <div
         ref="pageEl"
         class="relative mx-auto select-none cursor-crosshair"
@@ -48,8 +48,8 @@
         </div>
       </div>
     </div>
-    <div class="w-56 flex-none border-l px-4 py-4 space-y-2">
-      <div class="flex items-center justify-between mb-1">
+    <div class="flex-none px-4 border-t py-3 md:w-56 md:border-t-0 md:border-l md:py-4 md:space-y-2">
+      <div class="flex items-center justify-between mb-3 md:mb-1">
         <span class="text-sm pl-1">{{ t('color') }}</span>
         <div
           class="join rounded"
@@ -69,30 +69,32 @@
           </button>
         </div>
       </div>
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
-        :disabled="!hasRedactions && !wasReset"
-        @click.prevent="apply"
-      >
-        <IconCheck class="w-4 h-4" />
-        {{ t('apply') }}
-      </button>
-      <div class="border-t !mt-3 !mb-1" />
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
-        :disabled="!hasRedactions"
-        @click.prevent="reset"
-      >
-        <IconRotate class="w-4 h-4" />
-        {{ t('reset') }}
-      </button>
-      <button
-        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
-        @click.prevent="$emit('cancel')"
-      >
-        <IconX class="w-4 h-4" />
-        {{ t('cancel') }}
-      </button>
+      <div class="grid grid-cols-3 gap-2 md:block md:space-y-2">
+        <button
+          class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          :disabled="!hasRedactions && !wasReset"
+          @click.prevent="apply"
+        >
+          <IconCheck class="w-4 h-4" />
+          {{ t('apply') }}
+        </button>
+        <div class="hidden md:block border-t !mt-3 !mb-1" />
+        <button
+          class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          :disabled="!hasRedactions"
+          @click.prevent="reset"
+        >
+          <IconRotate class="w-4 h-4" />
+          {{ t('reset') }}
+        </button>
+        <button
+          class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
+          @click.prevent="$emit('cancel')"
+        >
+          <IconX class="w-4 h-4" />
+          {{ t('cancel') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/template_builder/drag_placeholder.vue b/app/javascript/template_builder/drag_placeholder.vue
index 177372fac..33d5435d0 100644
--- a/app/javascript/template_builder/drag_placeholder.vue
+++ b/app/javascript/template_builder/drag_placeholder.vue
@@ -5,7 +5,7 @@
     :style="dragPlaceholderStyle"
     :field="field"
     :with-options="false"
-    class="fixed z-20 pointer-events-none"
+    class="fixed z-50 pointer-events-none"
     :editable="false"
   />
   <CustomField
@@ -13,13 +13,13 @@
     ref="dragPlaceholder"
     :style="dragPlaceholderStyle"
     :field="field"
-    class="fixed z-20 pointer-events-none opacity-90"
+    class="fixed z-50 pointer-events-none opacity-90"
   />
   <div
     v-else-if="dragPlaceholder && (isDefault || isRequired) && !isMask && field"
     ref="dragPlaceholder"
     :style="[dragPlaceholderStyle, { backgroundColor: backgroundColor }]"
-    class="fixed z-20 border border-base-300 rounded group default-field fields-list-item pointer-events-none"
+    class="fixed z-50 border border-base-300 rounded group default-field fields-list-item pointer-events-none"
   >
     <div class="flex items-center justify-between relative cursor-grab">
       <div class="flex items-center p-1 space-x-1">
@@ -45,7 +45,7 @@
   <button
     v-else-if="dragPlaceholder && !isMask && field"
     ref="dragPlaceholder"
-    class="fixed field-type-button z-20 flex items-center justify-center border border-dashed w-full rounded border-base-content/20 opacity-90 pointer-events-none"
+    class="fixed field-type-button z-50 flex items-center justify-center border border-dashed w-full rounded border-base-content/20 opacity-90 pointer-events-none"
     :style="[dragPlaceholderStyle, { backgroundColor }]"
   >
     <div
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 821b23664..85f219708 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -114,6 +114,12 @@
               :title="t('settings')"
               class="cursor-pointer flex items-center"
               :class="[iconColorClass, { 'pr-1': isMobile }]"
+              @touchstart="onHandleTouchstart"
+              @touchmove="onHandleTouchmove"
+              @touchend="onHandleTouchend"
+              @touchcancel="onHandleTouchend"
+              @mousedown="dropdownWasOpen = $event.currentTarget.parentElement.contains($event.currentTarget.getRootNode().activeElement)"
+              @click="dropdownWasOpen && closeDropdown()"
             >
               <IconDotsVertical
                 v-if="isMobile"
@@ -417,9 +423,11 @@ export default {
       default: true
     }
   },
-  emits: ['set-draw', 'remove', 'scroll-to', 'save', 'add-custom-field'],
+  emits: ['set-draw', 'remove', 'scroll-to', 'save', 'add-custom-field', 'touch-drag', 'touch-drag-end'],
   data () {
     return {
+      touchDrag: null,
+      dropdownWasOpen: false,
       isExpandOptions: false,
       isNameFocus: false,
       isShowFormulaModal: false,
@@ -471,6 +479,37 @@ export default {
     }
   },
   methods: {
+    onHandleTouchstart (e) {
+      if (!this.isMobile) return
+
+      this.touchDrag = { startY: e.touches[0].clientY, moved: false }
+    },
+    onHandleTouchmove (e) {
+      if (!this.touchDrag) return
+
+      const { clientX, clientY } = e.touches[0]
+
+      if (!this.touchDrag.moved && Math.abs(clientY - this.touchDrag.startY) < 6) return
+
+      this.touchDrag.moved = true
+
+      e.preventDefault()
+
+      this.$emit('touch-drag', { field: this.field, x: clientX, y: clientY })
+    },
+    onHandleTouchend (e) {
+      if (!this.touchDrag) return
+
+      if (this.touchDrag.moved) {
+        e.preventDefault()
+
+        e.currentTarget.blur()
+
+        this.$emit('touch-drag-end')
+      }
+
+      this.touchDrag = null
+    },
     removeArea (area) {
       this.field.areas.splice(this.field.areas.indexOf(area), 1)
 
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index fb737034b..e10745025 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''"
+    :class="{ 'sticky top-0 z-[1]': withStickySubmitters, 'bg-base-100': withStickySubmitters && ['', null, 'transparent'].includes(backgroundColor), 'pt-3': withTopPadding }"
     :style="withStickySubmitters ? { backgroundColor } : {}"
     class="flex items-center gap-1"
   >
@@ -64,6 +64,8 @@
       @remove="removeField"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
+      @touch-drag="onTouchDrag"
+      @touch-drag-end="onTouchDragEnd"
     />
   </div>
   <div
@@ -356,24 +358,16 @@
           width="22"
           class="animate-spin"
         />
-        <span
-          v-if="analyzingProgress"
-          class="hidden md:inline"
-        >
+        <span v-if="analyzingProgress">
           {{ Math.round(analyzingProgress * 100) }}% {{ t('analyzing_') }}
         </span>
-        <span
-          v-else
-          class="hidden md:inline"
-        >
+        <span v-else>
           {{ fieldPagesLoaded }} / {{ numberOfPages }} {{ t('processing_') }}
         </span>
       </template>
       <template v-else>
         <IconSparkles width="22" />
-        <span
-          class="hidden md:inline"
-        >
+        <span>
           {{ t('autodetect_fields') }}
         </span>
       </template>
@@ -518,6 +512,11 @@ export default {
       required: false,
       default: true
     },
+    withTopPadding: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     fieldTypes: {
       type: Array,
       required: false,
@@ -829,6 +828,8 @@ export default {
 
                 this.save()
 
+                window.webkit?.messageHandlers?.flash?.postMessage({ style: 'notice', message: this.t('fields_detected').replace('{count}', (data.fields || fields).length) })
+
                 break
               } else if (data.fields) {
                 data.fields.forEach((f) => {
@@ -884,19 +885,58 @@ export default {
     },
     onFieldDragover (e) {
       if (this.fieldsDragFieldRef.value) {
-        const targetField = e.target.closest('[data-uuid]')
-        const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
+        this.moveFieldElement(this.fieldsDragFieldRef.value, e.target.closest('[data-uuid]'))
+      }
+    },
+    onTouchDrag ({ field, x, y }) {
+      const dragField = this.$refs.fields.querySelector(`[data-uuid="${field.uuid}"]`)
 
-        if (dragField && targetField && targetField !== dragField) {
-          const fields = Array.from(this.$refs.fields.children)
-          const currentIndex = fields.indexOf(dragField)
-          const targetIndex = fields.indexOf(targetField)
+      if (!dragField) return
 
-          if (currentIndex < targetIndex) {
-            targetField.after(dragField)
-          } else {
-            targetField.before(dragField)
-          }
+      if (!this.touchPreview) {
+        const rect = dragField.getBoundingClientRect()
+        const el = dragField.cloneNode(true)
+        const root = this.$el.getRootNode()
+
+        Object.assign(el.style, { position: 'fixed', left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`, margin: 0, zIndex: 50, pointerEvents: 'none', opacity: 0.9 })
+
+        ;(root === document ? document.body : root).appendChild(el)
+
+        dragField.style.opacity = 0.4
+
+        this.touchPreview = { el, dragField, offsetY: y - rect.top }
+      }
+
+      this.touchPreview.el.style.top = `${y - this.touchPreview.offsetY}px`
+
+      const root = this.$el.getRootNode()
+      const targetField = (root.elementFromPoint ? root : document).elementFromPoint(x, y)?.closest('[data-uuid]')
+
+      if (targetField && this.$refs.fields.contains(targetField)) {
+        this.moveFieldElement(field, targetField)
+      }
+    },
+    onTouchDragEnd () {
+      if (this.touchPreview) {
+        this.touchPreview.el.remove()
+        this.touchPreview.dragField.style.opacity = ''
+        this.touchPreview = null
+      }
+
+      this.reorderFields()
+    },
+    moveFieldElement (field, targetField) {
+      const dragField = this.$refs.fields.querySelector(`[data-uuid="${field.uuid}"]`)
+
+      if (dragField && targetField && targetField !== dragField) {
+        const fields = Array.from(this.$refs.fields.children)
+        const currentIndex = fields.indexOf(dragField)
+        const targetIndex = fields.indexOf(targetField)
+
+        if (currentIndex < targetIndex) {
+          targetField.after(dragField)
+        } else {
+          targetField.before(dragField)
         }
       }
     },
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index 872d73fcc..0cb03c880 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -9,6 +9,7 @@ const en = {
   downloading_: 'Downloading...',
   view: 'View',
   autodetect_fields: 'Autodetect Fields',
+  fields_detected: '{count} fields detected',
   payment_link: 'Payment link',
   strikeout: 'Strikeout',
   draw_strikethrough_the_document: 'Draw strikethrough the document',
@@ -101,6 +102,8 @@ const en = {
   documents: 'Documents',
   move_forward: 'Move forward',
   move_backward: 'Move backward',
+  backward: 'Backward',
+  forward: 'Forward',
   remove_page: 'Remove page',
   merge_with_previous: 'Merge with previous',
   merge_with_next: 'Merge with next',
@@ -251,6 +254,7 @@ const es = {
   save_as_custom_field: 'Guardar como personalizado',
   kba: 'KBA',
   autodetect_fields: 'Autodetectar campos',
+  fields_detected: '{count} campos detectados',
   analyzing_: 'Analizando...',
   download: 'Descargar',
   downloading_: 'Descargando...',
@@ -344,6 +348,8 @@ const es = {
   documents: 'Documentos',
   move_forward: 'Mover adelante',
   move_backward: 'Mover atrás',
+  backward: 'Atrás',
+  forward: 'Adelante',
   remove_page: 'Eliminar página',
   merge_with_previous: 'Combinar con el anterior',
   merge_with_next: 'Combinar con el siguiente',
@@ -497,6 +503,7 @@ const it = {
   save_as_custom_field: 'Salva come personalizzato',
   kba: 'KBA',
   autodetect_fields: 'Rileva campi',
+  fields_detected: '{count} campi rilevati',
   analyzing_: 'Analisi...',
   download: 'Scarica',
   downloading_: 'Download in corso...',
@@ -593,6 +600,8 @@ const it = {
   documents: 'Documenti',
   move_forward: 'Sposta avanti',
   move_backward: 'Sposta indietro',
+  backward: 'Indietro',
+  forward: 'Avanti',
   remove_page: 'Rimuovi pagina',
   merge_with_previous: 'Unisci al precedente',
   merge_with_next: 'Unisci al successivo',
@@ -743,6 +752,7 @@ const pt = {
   save_as_custom_field: 'Salvar como personalizado',
   kba: 'KBA',
   autodetect_fields: 'Detectar campos',
+  fields_detected: '{count} campos detectados',
   analyzing_: 'Analisando...',
   download: 'Baixar',
   downloading_: 'Baixando...',
@@ -836,6 +846,8 @@ const pt = {
   documents: 'Documentos',
   move_forward: 'Mover para frente',
   move_backward: 'Mover para trás',
+  backward: 'Para trás',
+  forward: 'Para frente',
   remove_page: 'Remover página',
   merge_with_previous: 'Mesclar com o anterior',
   merge_with_next: 'Mesclar com o próximo',
@@ -989,6 +1001,7 @@ const fr = {
   save_as_custom_field: 'Enregistrer comme personnalisé',
   kba: 'KBA',
   autodetect_fields: 'Détecter les champs',
+  fields_detected: '{count} champs détectés',
   analyzing_: 'Analyse...',
   download: 'Télécharger',
   downloading_: 'Téléchargement...',
@@ -1085,6 +1098,8 @@ const fr = {
   documents: 'Documents',
   move_forward: 'Déplacer en avant',
   move_backward: 'Déplacer en arrière',
+  backward: 'Reculer',
+  forward: 'Avancer',
   remove_page: 'Supprimer la page',
   merge_with_previous: 'Fusionner avec le précédent',
   merge_with_next: 'Fusionner avec le suivant',
@@ -1235,6 +1250,7 @@ const de = {
   save_as_custom_field: 'Als benutzerdefiniert speichern',
   kba: 'KBA',
   autodetect_fields: 'Felder erkennen',
+  fields_detected: '{count} Felder erkannt',
   analyzing_: 'Analysiere...',
   download: 'Download',
   downloading_: 'Download...',
@@ -1331,6 +1347,8 @@ const de = {
   documents: 'Dokumente',
   move_forward: 'Nach vorne',
   move_backward: 'Nach hinten',
+  backward: 'Zurück',
+  forward: 'Vorwärts',
   remove_page: 'Seite entfernen',
   merge_with_previous: 'Mit vorherigem zusammenführen',
   merge_with_next: 'Mit nächstem zusammenführen',
@@ -1481,6 +1499,7 @@ const nl = {
   save_as_custom_field: 'Opslaan als aangepast',
   kba: 'KBA',
   autodetect_fields: 'Velden detecteren',
+  fields_detected: '{count} velden gedetecteerd',
   analyzing_: 'Analyseren...',
   download: 'Downloaden',
   downloading_: 'Downloaden...',
@@ -1577,6 +1596,8 @@ const nl = {
   documents: 'Documenten',
   move_forward: 'Naar voren',
   move_backward: 'Naar achteren',
+  backward: 'Achteruit',
+  forward: 'Vooruit',
   remove_page: 'Pagina verwijderen',
   merge_with_previous: 'Samenvoegen met vorige',
   merge_with_next: 'Samenvoegen met volgende',
diff --git a/app/javascript/template_builder/mobile_draw_field.vue b/app/javascript/template_builder/mobile_draw_field.vue
deleted file mode 100644
index 28bee619a..000000000
--- a/app/javascript/template_builder/mobile_draw_field.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div class="absolute w-full bottom-0 pr-3 mb-4">
-    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
-      <div class="flex items-center space-x-2">
-        <component
-          :is="fieldIcons[drawField.type]"
-          :width="20"
-          :height="20"
-          class="inline"
-          :stroke-width="1.6"
-        />
-        <span>{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
-      </div>
-      <a
-        href="#"
-        class="link block text-center"
-        @click.prevent="$emit('cancel')"
-      >
-        {{ t('cancel') }}
-      </a>
-    </span>
-    <FieldSubmitter
-      :model-value="selectedSubmitter.uuid"
-      :submitters="submitters"
-      :editable="editable"
-      :mobile-view="true"
-      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
-      @new-submitter="save"
-      @remove="removeSubmitter"
-      @name-change="save"
-      @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
-    />
-  </div>
-</template>
-
-<script>
-import Field from './field'
-import FieldType from './field_type'
-import FieldSubmitter from './field_submitter'
-
-export default {
-  name: 'MobileDrawField',
-  components: {
-    Field,
-    FieldSubmitter
-  },
-  inject: ['save', 't', 'backgroundColor'],
-  props: {
-    drawField: {
-      type: Object,
-      required: true
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    submitters: {
-      type: Array,
-      required: true
-    },
-    fields: {
-      type: Array,
-      required: true
-    },
-    selectedSubmitter: {
-      type: Object,
-      required: true
-    }
-  },
-  emits: ['change-submitter', 'cancel'],
-  computed: {
-    fieldNames: FieldType.computed.fieldNames,
-    fieldIcons: FieldType.computed.fieldIcons
-  },
-  methods: {
-    removeSubmitter (submitter) {
-      [...this.fields].forEach((field) => {
-        if (field.submitter_uuid === submitter.uuid) {
-          this.removeField(field, false)
-        }
-      })
-
-      this.submitters.splice(this.submitters.indexOf(submitter), 1)
-
-      if (this.selectedSubmitter === submitter) {
-        this.$emit('change-submitter', this.submitters[0])
-      }
-
-      this.save()
-    },
-    removeField (field, save = true) {
-      this.fields.splice(this.fields.indexOf(field), 1)
-
-      if (save) {
-        this.save()
-      }
-    }
-  }
-}
-</script>
diff --git a/app/javascript/template_builder/mobile_drawer.vue b/app/javascript/template_builder/mobile_drawer.vue
new file mode 100644
index 000000000..32888086e
--- /dev/null
+++ b/app/javascript/template_builder/mobile_drawer.vue
@@ -0,0 +1,68 @@
+<template>
+  <div v-if="inline">
+    <slot />
+  </div>
+  <div
+    v-else
+    class="fixed inset-0 z-40"
+    :class="{ 'pointer-events-none': !open }"
+  >
+    <div
+      class="absolute inset-0 bg-black transition-opacity duration-300"
+      :class="open ? 'opacity-25' : 'opacity-0'"
+      @click="$emit('close')"
+      @dragenter="$emit('close')"
+      @touchmove.prevent
+    />
+    <div
+      ref="panel"
+      class="absolute top-0 bottom-0 bg-base-100 shadow-xl overflow-y-auto overflow-x-hidden overscroll-contain px-4 transition-transform duration-300 ease-out"
+      style="width: 82%; max-width: 340px"
+      :class="[side === 'left' ? 'left-0' : 'right-0', open ? 'translate-x-0' : (side === 'left' ? '-translate-x-full' : 'translate-x-full')]"
+      @touchmove="onPanelTouchmove"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MobileDrawer',
+  props: {
+    side: {
+      type: String,
+      required: false,
+      default: 'left'
+    },
+    open: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['close'],
+  watch: {
+    open (value) {
+      document.body.style.overflow = value ? 'hidden' : ''
+    }
+  },
+  beforeUnmount () {
+    if (this.open) {
+      document.body.style.overflow = ''
+    }
+  },
+  methods: {
+    onPanelTouchmove (e) {
+      if (this.$refs.panel.scrollHeight <= this.$refs.panel.clientHeight) {
+        e.preventDefault()
+      }
+    }
+  }
+}
+</script>
diff --git a/app/javascript/template_builder/mobile_fields.vue b/app/javascript/template_builder/mobile_fields.vue
deleted file mode 100644
index e0e51a88e..000000000
--- a/app/javascript/template_builder/mobile_fields.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <span class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10 fields-dropdown-mobile">
-    <label
-      class="btn btn-neutral text-white btn-circle btn-lg group"
-      tabindex="0"
-    >
-      <IconPlus
-        class="group-focus:hidden"
-        width="28"
-        height="28"
-      />
-      <IconX
-        class="hidden group-focus:inline p-3"
-        width="64"
-        height="50"
-        @click="closeDropdown"
-      />
-    </label>
-    <ul
-      tabindex="0"
-      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3 mt-1.5 bg-base-100"
-      @click="closeDropdown"
-    >
-      <template v-if="submitterDefaultFields.length">
-        <template
-          v-for="field in submitterDefaultFields"
-          :key="field.name"
-        >
-          <li>
-            <a
-              href="#"
-              class="text-sm py-1 px-2"
-              @click.prevent="$emit('select', { name: field.name || '', type: field.type || 'text' })"
-            >
-              <component
-                :is="fieldIcons[field.type || 'text']"
-                :stroke-width="1.6"
-                :width="20"
-              />
-              {{ field.title || field.name }}
-              <span
-                v-if="defaultRequiredFields.includes(field)"
-                :data-tip="t('required')"
-                class="text-red-400 text-2xl tooltip tooltip-left h-6"
-              >
-                *
-              </span>
-            </a>
-          </li>
-        </template>
-      </template>
-      <div
-        v-if="fieldTypes.length && submitterDefaultFields.length"
-        class="bg-base-300"
-        style="height: 1px; margin-top: 1px; margin-bottom: 1px"
-      />
-      <template v-if="fieldTypes.length || !submitterDefaultFields.length">
-        <template
-          v-for="(icon, type) in fieldIconsSorted"
-          :key="type"
-        >
-          <li v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification') && (withKba || type != 'kba'))">
-            <a
-              href="#"
-              class="text-sm py-1 px-2"
-              :class="{ 'active': type === modelValue }"
-              @click.prevent="$emit('select', { type })"
-            >
-              <component
-                :is="icon"
-                :stroke-width="1.6"
-                :width="20"
-              />
-              {{ fieldNames[type] }}
-            </a>
-          </li>
-        </template>
-      </template>
-    </ul>
-  </span>
-</template>
-<script>
-import { IconPlus, IconX } from '@tabler/icons-vue'
-import FieldType from './field_type'
-
-export default {
-  name: 'MobileFields',
-  components: {
-    IconPlus,
-    IconX
-  },
-  inject: ['withPhone', 'withPayment', 'withVerification', 'withKba', 'backgroundColor', 't'],
-  props: {
-    modelValue: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    fields: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    selectedSubmitter: {
-      type: Object,
-      required: true
-    },
-    fieldTypes: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    defaultRequiredFields: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    defaultFields: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
-  },
-  emits: ['select'],
-  computed: {
-    ...FieldType.computed,
-    submitterFields () {
-      return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
-    },
-    submitterDefaultFields () {
-      return this.defaultFields.filter((f) => {
-        return (!f.role || f.role === this.selectedSubmitter.name)
-      })
-    }
-  },
-  methods: {
-    closeDropdown () {
-      document.activeElement.blur()
-    }
-  }
-}
-</script>