fix overlap

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>

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>

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"