adjust form builder

app/javascript/application.js

@@ -79,6 +79,8 @@ window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
+    this.appElem.classList.add('md:h-screen')
+
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),
       backgroundColor: '#faf7f5',

app/javascript/template_builder/builder.vue

@@ -4,6 +4,7 @@
     class="mx-auto pl-3 md:pl-4 h-full"
   >
     <div
+      v-if="$slots.buttons || withTitle"
       class="flex justify-between py-1.5 items-center pr-4 sticky top-0 z-10"
       :style="{ backgroundColor }"
     >
@@ -15,6 +16,7 @@
           <Logo />
         </a>
         <Contenteditable
+          v-if="withTitle"
           :model-value="template.name"
           :editable="editable"
           class="text-3xl font-semibold focus:text-clip"
@@ -64,7 +66,10 @@
         </template>
       </div>
     </div>
-    <div class="flex md:max-h-[calc(100vh-60px)]">
+    <div
+      class="flex"
+      :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
+    >
       <div
         ref="previews"
         :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
@@ -90,7 +95,7 @@
         />
         <div
           class="sticky bottom-0 py-2"
-          :class="{ 'bg-base-100': withStickySubmitters }"
+          :style="withStickySubmitters ? { backgroundColor } : {}"
         >
           <Upload
             v-if="sortedDocuments.length && editable && withUploadButton"
@@ -200,7 +205,8 @@
       >
         <div
           v-if="drawField"
-          class="sticky inset-0 bg-base-100 h-full"
+          class="sticky inset-0 h-full"
+          :style="{ backgroundColor }"
         >
           <div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
             <p>
@@ -336,6 +342,11 @@ export default {
       required: false,
       default: true
     },
+    withTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withPhone: {
       type: Boolean,
       required: false,

app/javascript/template_builder/contenteditable.vue

@@ -24,11 +24,10 @@
       *
     </span>
     <IconPencil
-      v-if="editable"
       class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
-      :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
+      :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
       @click="[focusContenteditable(), selectOnEditClick && selectContent()]"