From 522df7f4764f9be3964739f291cd95d68c94cd61 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Wed, 16 Sep 2026 20:33:22 +0300
Subject: [PATCH] fix overlap

---
 app/javascript/template_builder/area_title.vue      | 7 ++++---
 app/javascript/template_builder/builder.vue         | 6 +++---
 app/javascript/template_builder/field_submitter.vue | 5 ++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/javascript/template_builder/area_title.vue b/app/javascript/template_builder/area_title.vue
index 9adcbbd9a..7d1792a7f 100644
--- a/app/javascript/template_builder/area_title.vue
+++ b/app/javascript/template_builder/area_title.vue
@@ -1,8 +1,9 @@
 <template>
   <div
     v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
-    class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
+    class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex field-area-controls"
     style="top: -25px; height: 25px"
+    :style="{ zIndex: isMobile ? 5 : 10 }"
     @mousedown.stop="$emit('click-title')"
     @pointerdown.stop
   >
@@ -88,7 +89,7 @@
         :title="t('settings')"
         class="cursor-pointer flex items-center"
         :class="{ 'pr-0.5': isMobile }"
-        style="height: 25px"
+        style="height: 24px"
         @focus="isSettingsFocus = true"
         @blur="maybeBlurSettings"
       >
@@ -161,7 +162,7 @@
         tabindex="0"
         :title="t('settings')"
         class="cursor-pointer flex items-center pr-0.5"
-        style="height: 25px"
+        style="height: 24px"
       >
         <IconDotsVertical class="w-5 h-5" />
       </label>
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index e5acd88f4..29679b935 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -760,7 +760,7 @@
     </div>
     <div
       v-if="!nativeView"
-      class="sticky bottom-0 z-10"
+      class="sticky bottom-0 z-20"
     >
       <native-action
         v-if="nativePlatform && withDocumentsList && isBreakpointLg && sortedDocuments.length && editable"
@@ -885,9 +885,9 @@
     >
       <div
         v-if="zoomLevel > 1"
-        class="sticky bottom-0 z-40 pointer-events-none"
+        class="sticky bottom-0 z-10 pointer-events-none"
       >
-        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+        <div class="absolute left-0 right-0 bottom-6 md:bottom-4 flex justify-center">
           <div class="join shadow pointer-events-auto">
             <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
               <span>
diff --git a/app/javascript/template_builder/field_submitter.vue b/app/javascript/template_builder/field_submitter.vue
index 185d55387..d69c6deb6 100644
--- a/app/javascript/template_builder/field_submitter.vue
+++ b/app/javascript/template_builder/field_submitter.vue
@@ -125,7 +125,10 @@
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
-      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded flex-shrink-0">
+      <span
+        class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded flex-shrink-0"
+        :class="{ border: isMobile }"
+      >
         <component
           :is="editable ? 'IconPlus' : 'IconChevronDown'"
           width="18"