adjust builder

app/javascript/application.js

@@ -268,6 +268,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
 
   onSheetSubmit = (e) => {
     this.applySubmission(e.detail.form, e.detail.action, e.detail.body, {})
+    this.component.syncNative()
   }
 
   onSync = (e) => {

app/javascript/elements/native_event.js

@@ -2,6 +2,7 @@ export default class extends HTMLElement {
   connectedCallback () {
     if (this.dataset.on === 'submit') {
       document.addEventListener('turbo:submit-end', this.onSubmitEnd)
+      this.addEventListener('turbo:before-fetch-response', this.onBeforeFetchResponse)
     } else {
       this.addEventListener('click', this.dispatch)
     }
@@ -9,9 +10,18 @@ export default class extends HTMLElement {
 
   disconnectedCallback () {
     document.removeEventListener('turbo:submit-end', this.onSubmitEnd)
+    this.removeEventListener('turbo:before-fetch-response', this.onBeforeFetchResponse)
     this.removeEventListener('click', this.dispatch)
   }
 
+  onBeforeFetchResponse = (e) => {
+    const response = e.detail.fetchResponse
+
+    if (window.webkit?.messageHandlers?.modal && response.succeeded && !response.redirected && !response.isHTML) {
+      e.preventDefault()
+    }
+  }
+
   onSubmitEnd = async (e) => {
     const form = e.detail.formSubmission?.formElement
 

app/javascript/template_builder/builder.vue

@@ -119,7 +119,6 @@
           :with-signature-id="withSignatureId"
           :with-prefillable="withPrefillable"
           :only-defined-fields="onlyDefinedFields"
-          :with-sticky-submitters="!!nativeView"
           :editable="editable"
           :scroll-on-edit="false"
           @add-field="addField"
@@ -792,7 +791,7 @@
       </native-action>
       <button
         v-if="drawField && (isBreakpointLg || isMobile) && !nativePlatform"
-        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="btn btn-neutral text-white rounded-full no-animation transition-none absolute bottom-6 -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 }"
         style="max-width: calc(100% - 11rem); --btn-focus-scale: 1"
         @click.prevent="[drawField = null, drawOption = null]"
@@ -804,7 +803,10 @@
           :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>
+        <span
+          class="truncate normal-case font-normal leading-normal"
+          style="font-size: 15px"
+        >{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
         <IconX
           :width="18"
           :height="18"

app/javascript/template_builder/fields.vue

@@ -653,8 +653,8 @@ export default {
 
     if (this.isMobile) {
       this.fieldTypesObserver = new IntersectionObserver(([entry]) => {
-        this.isShowAddFieldsPill = !entry.isIntersecting
-      })
+        this.isShowAddFieldsPill = !entry.isIntersecting && entry.boundingClientRect.top > 0
+      }, { rootMargin: '0px 100%' })
 
       this.fieldTypesObserver.observe(this.$refs.addFieldsMarker)
     }