From 80c1b04e832ba531fa1cd8a0271fa942fda1afdb Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Wed, 24 Jan 2024 01:11:04 +0200
Subject: [PATCH] fix mobile builder style

---
 app/javascript/template_builder/builder.vue   | 40 ++++++++++---------
 .../template_builder/mobile_draw_field.vue    |  2 +-
 .../template_builder/mobile_fields.vue        |  2 +-
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index fb22ce2a..7672e07f 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -186,25 +186,6 @@
             </div>
           </template>
         </div>
-        <MobileDrawField
-          v-if="drawField && isBreakpointLg"
-          :draw-field="drawField"
-          :fields="template.fields"
-          :submitters="template.submitters"
-          :selected-submitter="selectedSubmitter"
-          class="md:hidden"
-          :editable="editable"
-          @cancel="[drawField = null, drawOption = null]"
-          @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
-        />
-        <MobileFields
-          v-if="sortedDocuments.length && !drawField && editable"
-          :fields="template.fields"
-          :default-fields="defaultFields"
-          :field-types="fieldTypes"
-          :selected-submitter="selectedSubmitter"
-          @select="startFieldDraw($event)"
-        />
       </div>
       <div
         v-if="withFieldsList"
@@ -260,6 +241,27 @@
         </div>
       </div>
     </div>
+    <div class="sticky bottom-0">
+      <MobileDrawField
+        v-if="drawField && isBreakpointLg"
+        :draw-field="drawField"
+        :fields="template.fields"
+        :submitters="template.submitters"
+        :selected-submitter="selectedSubmitter"
+        class="md:hidden"
+        :editable="editable"
+        @cancel="[drawField = null, drawOption = null]"
+        @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
+      />
+      <MobileFields
+        v-if="sortedDocuments.length && !drawField && editable"
+        :fields="template.fields"
+        :default-fields="defaultFields"
+        :field-types="fieldTypes"
+        :selected-submitter="selectedSubmitter"
+        @select="startFieldDraw($event)"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/app/javascript/template_builder/mobile_draw_field.vue b/app/javascript/template_builder/mobile_draw_field.vue
index 44de4d0b..84c56b0d 100644
--- a/app/javascript/template_builder/mobile_draw_field.vue
+++ b/app/javascript/template_builder/mobile_draw_field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed text-center w-full bottom-0 pr-6 mb-4">
+  <div class="absolute text-center 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 md:hidden">
       <div class="flex items-center space-x-2">
         <component
diff --git a/app/javascript/template_builder/mobile_fields.vue b/app/javascript/template_builder/mobile_fields.vue
index 4adbfd11..bf9d9220 100644
--- a/app/javascript/template_builder/mobile_fields.vue
+++ b/app/javascript/template_builder/mobile_fields.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
+    class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10 md:hidden"
   >
     <label
       class="btn btn-neutral text-white btn-circle btn-lg group"